Schlaus Schlaus - 1 month ago 8
Sass (Sass) Question

Applying a CSS transform before animation

I have the following situation:



#animation-target {
transform: rotate(90deg);

width: 50px;
height: 100px;
animation: peek-from-left 1000ms linear;
}

@keyframes peek-from-left {
0% { transform: translate(-100%, 0) }
100% { transform: translate(0, 0) }
}

<div id="animation-target">
<img src="http://placehold.it/50x100"/>
</div>





The transform is only applied after the animation, but I need it to work the other way around. How can I make the transform happen first?

Answer

You are setting a default property (90 deg rotation), then overriding the rotation when animating the horizontal translate. Once the animation is done, it is defaulting to the initial status.

If you want to keep the rotation in place, you will need to specify it in the animation as well.

The problem with this is though, when you rotate using a transform, the width is now the height, hence the transform origin hack :)

body {
  margin: 0;
}

#animation-target {
  transform: translate(100%, 0) rotate(90deg);
  transform-origin: 50% 25%;
  width: 50px;
  height: 100px;
  animation: peek-from-left 1000ms linear;
}

@keyframes peek-from-left {
  0% { transform: translate(-100%, 0) rotate(90deg) }
  100% { transform: translate(100%, 0) rotate(90deg) }
}
<div id="animation-target">
  <img src="http://placehold.it/50x100"/>
</div>

Comments