Animation CSS avec transformations au lieu des marges

Question

Au lieu d'utiliser les marges, j'ai utilisé les transformations. (Bien sûr, il faut rajouter les préfixes.)
body {
margin: 50px;
}
button {
padding: 15px 30px;
border: 0;
font-size: 1.5em;
animation: anim 3s alternate infinite;
}
@keyframes anim {
0% {
transform: translateX(0px) translateY(0px);
}
25% {
transform: translateX(400px) translateY(0px);
}
50% {
transform: translateX(400px) translateY(150px);
}
75% {
transform: translateX(0px) translateY(150px);
}
100% {
transform: translateX(0px) translateY(0px);
}
}

Louis-Nicolas Leuillet · Accepted Answer

Ah, bien vu !
Petit détail : tu peux aussi combiner tes deux translate en un seul avec translate(400px, 150px) pour raccourcir un peu, mais c'est du détail cosmétique.
Par contre, concernant les préfixes ils ne sont quasiment plus nécessaires pour les animations et les transformations car tous les navigateurs modernes supportent ces propriétés sans préfixe depuis un bon moment maintenant !

Daniel Labordes · Answer

Ah merci, je n'était pas au courant pour les prefix c'est bon à savoir. Pour la combinaison j'ai préféré détailler pour que ce soit plus visible pour ceux qui éventuellement découvrent cette façon de faire :-)

Animation CSS avec transformations au lieu des marges

Formation Apprendre HTML (legacy)