Пошаговая анимация в CSS ⇐ CSS

[Anonymous]

I want to apply four states as animation to an element using CSS.

My sample code:

.child { display: block; width: 50px; height: 50px; background-color: #068031; } #main-box { position: absolute; top: 0; left: 0; transform-style: preserve-3d; animation: Step_by_step_movement 3s linear infinite; } @keyframes Step_by_step_movement { 0% { top: 0%; left: 0; } 50% { top: 10%; left: 15%; } 100% { top: 20%; left: 25%; } from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } 0% { top: 20%; left: 25%; } 50% { top: 10%; left: 15%; } 100% { top: 0%; left: 0; } from { transform: rotateX(0deg); } to { transform: rotateX(360deg); } }

The problem with the above code is that only two animations are executed simultaneously.

Is there a way to use css to run an animation at a specific time each time and then run the next animation immediately after it ends?


Источник: https://stackoverflow.com/questions/780 ... ion-in-css