Keyframe animation removing skew from div on animation

332
May 23, 2017, at 05:11 AM

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; 
  } 
}
<div>Hello, this is a skewed div that does not stay skewed when the animation is in progress.</div>

Answer 1

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>

READ ALSO
iPhone disable swiping left and right to make the page move

iPhone disable swiping left and right to make the page move

I'm gonna try my best to explain thisIf you go to target

304
How do I create a smooth transition in my menu dropdown?

How do I create a smooth transition in my menu dropdown?

I'm trying to figure out how to make a smooth transition in my menu transitionI already wrote a function for the times to appear and disappear onclick, but I'm not sure how to style the transition

214
Bootstrap - Image Align - Within a row

Bootstrap - Image Align - Within a row

Im trying to center three small thumbnails in a 12 row, I only want these three images in the row, but using center-block, responsive image, align or breaking the row into smaller segments (4, 4, 4)

254
Mouseover popup speech bubble

Mouseover popup speech bubble

I'm new to javascript/css and would like to make a version of a mouseover popup similar to the one that displays over the underlined words here: http://stjapantimes

323