javascript - Rotate div after animation -
I am trying to make a type of crash test dummy, when you click on I got the CSS to work on the transform Is only your tilt It requires a little work, but you do it completely in CSS By adding a class and chaining animation ... JS CSS document The window will move right to my
.person div and then tilt the face in the end, and then tilt back to its original position
div immediately and not at the end of the movement? Sorry if it is difficult to understand, I have created a JSFDial to explain ...
// Click on me. The viewer div will move right, once it is moved, it needs to tilt forward and then backwards - like its one wall ... click on $ (document). On ('click', function () {$ ('. Person'). Animate ({"left": "+ = 250px"}, 500, crashimocutt (30));}); Function crash impedance (inclination) {$ ('. Person'). CSS ({conversion: 'rotate (' + tilt + 'degree)'}); }
- (chrome)
$ (document) .on ('click' , Function () {$ ('. Person'). AddClass ('go');});
.person.go {-webkit-animation-delay: 0, .5s; -webkit-animation-duration: .5s, .5s; Webkit-animation-repetition-count: 1, 1; Webkit-animation-name: anime forward, animatil; -webkit- animation-time-function: in ease; -webkit - Animation Fill-Mode: Forward; Webkit-transform-origin: 0%; } @ -webkit-keyframes {{margin-left: 0; } {Margin-left: 400px; }} @ -WebKit-keyframe animationTault {0% {-bbkit-transform: rotate (0deg); } 50% {-webkit-transform: rotate (45deg); } 100% {-webkit-transform: rotate (0deg); }}
Comments
Post a Comment