Css--use animate.cssto create an animation effect. css--animate.css

Css--use animate.cssto create an animation effect. css--animate.css
1. Use animate.css Animation

// Use @ import to introduce external CSS resources;

// Introduce the slice and JS file;

// Generate CSS 3 animations of different types by changing the CSS class name;

 

1 <! DOCTYPE html> 2 
 
 
1 @ keyframes bounce {/* Create a bounce animation using the @ keyframes rule; */2 0%, 20%, 50%, 80%, 100% {3 transform: translateY (0 ); 4} 5 40% {6 transform: translateY (-30px); 7} 8 60% {9 transform: translateY (-15px); 10} 11} 12. bounce {13 animation-name: bounce;/* call the bounce animation; */14} 15. animated {16 animation-duration: 3 s;/* length of an animation cycle; */17 animation-fill-mode: both;/* specifies the style after the animation is executed; */18} 19. animated. infinite {20 animation-iteration-count: infinite;/* defines the number of times the animation is played; (n times/infinite unlimited times); */21}
1 
1 $ ('img '). click (function () {// bind a click event to the Img element; 2 var $ this = $ (this); // Add the corresponding animation class name after clicking the mouse; 3 $ this. addClass ('animated bounce '). one ('webkitanimationend extends animationend MSAnimationEnd oanimationend', function () {4 //When the-webkit-animation ends, a webkitAnimationEnd event is triggered;5 //The function is executed only after the one () method listens to the webkitAnimationEnd event. The one () method can only be executed once;6 $ this. removeClass (); // clear the corresponding animation class name; 7}) 8 });