Hunter Turner Hunter Turner - 1 year ago 55
CSS Question

Keyframe animation removing skew from div on animation

I have a skew transform applied to a div and I'm wanting to animate it on page load.

When I use the a keyframe animation, the skew is removed during the animation and then "popps" into place once the animation is complete.

How can I keep the skew applied to the div while the animation is in progress?



div {
-webkit-transform:skew(-197deg);
-moz-transform:skew(-197deg);
transform:skew(-197deg);
width: 200px;
margin-left: 40px;
animation: 1s ease-in-out 0s 1 slideInFromLeft;
}

@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
opacity: 0;
}
60% {
opacity: 0.5;
}
100% {
transform: translateX(0);
opacity: 1;
}
}

<div>Hello, this is a skewed div that does not stay skewed when the animation is in progress.</div>




Answer Source

You need to add the skew to the animation or else the animation rule will overwrite it.

div {
  -webkit-transform:skew(-197deg);
  -moz-transform:skew(-197deg);
  transform:skew(-197deg);
  width: 200px;
  margin-left: 40px;
  animation: 1s ease-in-out 0s 1 slideInFromLeft;
}

@keyframes slideInFromLeft {
  0% {
    transform: skew(-197deg) translateX(-100%);
    opacity: 0;
  }
  60% {
    opacity: 0.5;
  }
  100% {
    transform: skew(-197deg) translateX(0);
    opacity: 1;
  }
}
<div>Hello, this is a skewed div that does not stay skewed when the animation is in progress.</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download