Css3 animation special effect plug-in, css3animation

Css3 animation special effect plug-in, css3animation

This is a Web https://daneden.github.io/animate.css/ for Online demonstration of css3 animation Effects

Download the animate.css file. There are a lot of code in the file, but you must understand that it is a CSS style of many special effects. If you only use one or two special effects, you can copy them selectively.

 

First, public styles:

.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 animation duration;

. Animated. infinite defines a loop animation. You do not need to add this style if you only need to play it once.

The following is an example of a special effect style:

• 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;}

For html pages, you can use text, images, and other elements. The following effect is a continuously beating image.

• 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 also many animation effects, which can be viewed on the animate.css website. The name of each special effect is exactly the class name defined by the style and the animation frame name, which can be matched one by one. You can also download the latest version of the animate.css file from this website.

 

Tip: animation is a feature of css3 and supports the latest mainstream browsers. The above plug-in supports webkit kernels. If you want to support other latest browsers, add the animation frames with the corresponding browser vendor prefix.

 

Animate.css file Network Disk download: https://pan.baidu.com/s/1sl6c1uX