Introduction to the method of using CSS3 animation animation effect Plugin

Download the Animate.css file, the file code a lot, but to understand that it is a lot of special effects of CSS style, if only to use one or two of the effects, you can choose to copy.

The first is the public style:

. animated {  -webkit-animation-duration:1s;  Animation-duration:1s;  -webkit-animation-fill-mode:both;  Animation-fill-mode:both;}. animated.infinite {  -webkit-animation-iteration-count:infinite;  Animation-iteration-count:infinite;}

. animated defines the duration of the animation;

The. Animated.infinite defines a looping animation, and if it is only required to play once it is not necessary to add the style below is the style of each effect, for example:

• Bounce Effect Bound

@-webkit-keyframes Bounce {From, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier (0.215, 0.610, 0.    355, 1.000);    Animation-timing-function:cubic-bezier (0.215, 0.610, 0.355, 1.000);    -webkit-transform:translate3d (0,0,0);  Transform:translate3d (0,0,0);    } 40%, 43% {-webkit-animation-timing-function:cubic-bezier (0.755, 0.050, 0.855, 0.060);    Animation-timing-function:cubic-bezier (0.755, 0.050, 0.855, 0.060);    -webkit-transform:translate3d (0, -30px, 0);  Transform:translate3d (0, -30px, 0);    } 70% {-webkit-animation-timing-function:cubic-bezier (0.755, 0.050, 0.855, 0.060);    Animation-timing-function:cubic-bezier (0.755, 0.050, 0.855, 0.060);    -webkit-transform:translate3d (0, -15px, 0);  Transform:translate3d (0, -15px, 0);    } 90% {-webkit-transform:translate3d (0,-4px,0);  Transform:translate3d (0,-4px,0); }} @keyframes Bounce {from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier (0.215, 0.610, 0.355, 1.000);    Animation-timing-function:cubic-bezier (0.215, 0.610, 0.355, 1.000);    -webkit-transform:translate3d (0,0,0);  Transform:translate3d (0,0,0);    } 40%, 43% {-webkit-animation-timing-function:cubic-bezier (0.755, 0.050, 0.855, 0.060);    Animation-timing-function:cubic-bezier (0.755, 0.050, 0.855, 0.060);    -webkit-transform:translate3d (0, -30px, 0);  Transform:translate3d (0, -30px, 0);    } 70% {-webkit-animation-timing-function:cubic-bezier (0.755, 0.050, 0.855, 0.060);    Animation-timing-function:cubic-bezier (0.755, 0.050, 0.855, 0.060);    -webkit-transform:translate3d (0, -15px, 0);  Transform:translate3d (0, -15px, 0);    } 90% {-webkit-transform:translate3d (0,-4px,0);  Transform:translate3d (0,-4px,0);  }}.bounce {-webkit-animation-name:bounce;  Animation-name:bounce;  -webkit-transform-origin:center Bottom; Transform-origin:center Bottom;}

Used in HTML pages, can be used for text, pictures and other elements, the following effect is a continuous beat of the picture

• Flashing effect Flash

@-webkit-keyframes Flash {from  , 50%, to {    opacity:1;  }  25%, 75% {    opacity:0;  }} @keyframes Flash {from  , 50%, to {    opacity:1;  }  25%, 75% {    opacity:0;  }}. Flash {  -webkit-animation-name:flash;  Animation-name:flash;}

• Swing Effect Swing

@-webkit-keyframes Swing {20% {-webkit-transform:rotate3d (0, 0, 1, 15deg);  Transform:rotate3d (0, 0, 1, 15deg);    } 40% {-webkit-transform:rotate3d (0, 0, 1, -10deg);  Transform:rotate3d (0, 0, 1, -10deg);    } 60% {-webkit-transform:rotate3d (0, 0, 1, 5deg);  Transform:rotate3d (0, 0, 1, 5deg);    } 80% {-webkit-transform:rotate3d (0, 0, 1, -5deg);  Transform:rotate3d (0, 0, 1, -5deg);    } to {-webkit-transform:rotate3d (0, 0, 1, 0deg);  Transform:rotate3d (0, 0, 1, 0deg);    }} @keyframes Swing {20% {-webkit-transform:rotate3d (0, 0, 1, 15deg);  Transform:rotate3d (0, 0, 1, 15deg);    } 40% {-webkit-transform:rotate3d (0, 0, 1, -10deg);  Transform:rotate3d (0, 0, 1, -10deg);    } 60% {-webkit-transform:rotate3d (0, 0, 1, 5deg);  Transform:rotate3d (0, 0, 1, 5deg);    } 80% {-webkit-transform:rotate3d (0, 0, 1, -5deg);  Transform:rotate3d (0, 0, 1, -5deg);    } to {-webkit-transform:rotate3d (0, 0, 1, 0deg); Transform:rotate3d(0, 0, 1, 0deg);  }}.swing {-webkit-transform-origin:top Center;  Transform-origin:top Center;  -webkit-animation-name:swing; animation-name:swing;}

There are many animation animation effects, can be viewed on the ANIMATE.CSS website, each special effect of the name is also the style definition of the class name, animation frame name, you can correspond. You can also download the latest version of the Animate.css file on this website.

Warm tip: Animation is CSS3 features, support is the latest mainstream browser, the above plug-in is supported-webkit kernel browser, if you want to support other latest browser, please add the corresponding browser vendor prefix animation frame.