javascript - Rotate div after animation -


I am trying to make a type of crash test dummy, when you click on 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

I got the CSS to work on the transform Is only your tilt 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)'}); }    

It requires a little work, but you do it completely in CSS By adding a class and chaining animation ...

- (chrome)

JS

  $ (document) .on ('click' , Function () {$ ('. Person'). AddClass ('go');});   

CSS

  .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

Popular posts from this blog

Pass DB Connection parameters to a Kettle a.k.a PDI table Input step dynamically from Excel -

multithreading - PhantomJS-Node in a for Loop -

c++ - MATLAB .m file to .mex file using Matlab Compiler -