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

python - Writing Greek in matplotlib labels, titles -

c# - LINQ to Entities does not recognize the method 'Int32 IndexOf(System.String, System.StringComparison)' method -

Pygame memory leak with transform.flip -