Keyframe animation removing skew from div on animation

Question

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 "pops" 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;
  }
}

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

Keyframe animation removing skew from div on animation

1 Answers