css animation ignores rotation

Question

I am trying to make an animation, where few elements would appear bigger than they are and shrink back to normal.

Here's what I've got:

One of the elements

#element {
  position: absolute;
  width: 38%;
  height: auto;
  animation: ani 250ms ease-in;
  -webkit-animation: ani 250ms ease-in;
  transform: rotate(82deg);
}

And keyframe

@keyframes ani {
    0% {
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
    }
    100% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

HTML

<div id="wrapper">
  <img id="element" src="img.svg">
  <img id="element2" src="img2.svg">
</div>

The problem is that whenever the animation starts, elements appear as they never been rotated and rotates only after animation ends. How could I force them to rotate before the animation?

Answer 1

you should combine the rotation code with transform in animation as well. basically rotate and scale both are the values of transform property, so if you only use scale in the animation, it will override rotate value and will only show the scale.

#element {
  position: absolute;
  width: 38%;
  height: auto;
  animation: ani 250ms ease-in;
  -webkit-animation: ani 250ms ease-in;
  transform: rotate(82deg);
}

@keyframes ani {
    0% {
        transform: scale(1.5) rotate(82deg);
        -webkit-transform: scale(1.5) rotate(82deg);
    }
    100% {
        transform: scale(1.0) rotate(82deg);
        -webkit-transform: scale(1.0) rotate(82deg);
    }
}

<div id="wrapper">
  <img id="element" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
  <img id="element2" src="http://smallbusinessbc.ca/wp-content/themes/sbbcmain/images/circle-icons/icon-education.svg">
</div>