Bonjour, je te remercie pour ton aide ça à bien fonctionner tous est comme je le voulais. J'aurais une autre question qu'y n'a rien à voir, mais j'aimerais rajouter une animation pour faire en sorte que le texte arrive depuis un côté de mon article.
Code :
- article .orange::before{
- content: url("image/orange.png" );
- position: absolute;
- display: inline-block;
- bottom: 20px;
- left: 800px;
- transform: rotate(60deg);
- z-index: -10;
- }
- article .rose::before{
- content: url("image/rose.jpg" );
- position: absolute;
- display: inline-block;
- bottom: 20px;
- left: 800px;
- transform: rotate(60deg);
- z-index: -10;
- }
- article .blanc::before{
- content: url("image/blanc.jpg" );
- transform: rotate(300deg);
- position: absolute;
- display: inline-block;
- bottom: 20px;
- right: 800px;
- z-index: -10;
- }
- article .orange{
- animation-name: slidedroite;
- animation-duration: 3s;
- }
- article .rose{
- animation-name: slidedroite;
- animation-duration: 3s;
- }
- article .blanc{
- animation-name: slidegauche;
- animation-duration: 3s;
- }
- @keyframes slidegauche{
- from{
- margin-left: 100%;
- width: 100%;
- }
- to{
- margin-left: 0%;
- width: 100%;
- }
- }
- @keyframes slidedroite{
- from{
- margin-right: 100%;
- width: 100%;
- }
- to{
- margin-left: 0%;
- width: 100%;
- }
- }
|
Voici le css que j'ai fait, pour l'animation de "slidegauche" tout marche correctement, mais pour la deuxième "slidedroite" qui est censé être la même, mais de faire venir tout mon article depuis l'autre côté, elle ne fonctionne pas du tout.
J'aimerais aussi faire en sorte que les animations ne s'affiche pas tous immédiatement au chargement de la page, mais seulement quand il apparaisse à l'écran. <
Si vous avez des solutions, je suis preneur, merci.