27858 sujets

CSS et mise en forme, CSS3

Bonjour, j'aimerais créer une animation où 2002 se transforme en 2020. Le problème est que lorsque mon animation atteint les 100%, le texte retourne à sa place d'origine alors que j'aimerais qu'à 100% le texte ne bouge plus ... Merci beaucoup Smiley loveu

Mon code suit cette forme :

20<span class="zero">0</span><span class="deux">2</span>



.zero {
animation: zero 1s;
}
.deux {
animation: deux 1s;
}

@keyframes zero {
0%{margin-left: 0;}
100%{margin-left: 30px;}
}
@keyframes deux {
0%{margin-left: 0;}
100%{margin-left: -30px;}
}

Modifié par vzytoi (16 Apr 2020 - 16:05)
Bonjour Aliasdmc.
Effectivement c'est niquel, merci beaucoup de ton aide Smiley loveu !


.zero {
animation: zero 1s;
animation-fill-mode: forwards;
}
.deux {
animation: deux 1s;
animation-fill-mode: forwards;
}

@keyframes zero {
0%{margin-left: 0;}
100%{margin-left: 30px;}
}
@keyframes deux {
0%{margin-left: 0;}
100%{margin-left: -30px;}
}

Modifié par vzytoi (16 Apr 2020 - 16:46)