CODEWITHSUNDEEP
csscss-animations
kolekole
kolekole

Reputation: 21

@keyframes properties using many movements

Could someone explain me how the extended rotation works in one @keyframes? I can understand easy movements, but it is incomprehensible for me to keep several turns in one @keyframes.

To illustrate it better I wrote @keyframes for both options:

Option A 

@keyframes optionA1 {
  from {
    transform: rotateX(-20deg) rotateY(-30deg); 
  }
  to {
    transform: rotateX(-20deg)  rotate(-30deg);
  } 
}

@keyframes optionA2 {
  from {
    transform: rotateX(-20deg)  rotate(-30deg);
  }
  to {
    transform:  rotateX(-50deg) rotateZ(30deg) ;
  }
}

Object's animation: optionA1 (0-5s) optionA2 (5-10s)

Option B:

@keyframes optionB {
  from {
    transform: rotateX(-20deg) rotateY(-30deg); 
  }
  to {
    transform: rotateX(-20deg)  rotate(-30deg)
    rotateX(-50deg) rotateZ(30deg) ;
  } 
}

Object's animation: optionB (0-10s)

Why does not my object move the same when I used the same movements in keyframes?

How should I read the movements contained in the option b's keyframes?

How should I write option B for object's animation to be the same as in option A, but in one step - I do not want the movement to stop for a moment?

Upvotes: 0

Views: 45

Answers (1)

Natalia Davydova
Natalia Davydova

Reputation: 748

Try to split your last step in 2 steps:

@keyframes optionB {
  0% {
    transform: rotateX(-20deg) rotateY(-30deg); //start position
  }

  50% {
    transform: rotateX(-20deg)  rotate(-30deg); //5 sec

  } 

  100% {
    transform: rotateX(-50deg) rotateZ(30deg) ; //final position
  }

}

Upvotes: 1

Related Questions