html动画循环播放,CSS3animation（动画）属性⼀、animation
1.CSS3animation(动画) 属性
语法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
实例：
div{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
2.animation-delay  定义动画什么时候开始
语法：
animation-delay: time;
实例：
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari 和 Chrome */
3.animation-direction  定义是否循环交替反向播放动画
语法：
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
实例：
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */
参数：
指动画时间轴上帧前进的⽅向。
normal：默认值，表⽰⼀直向前，最后⼀帧结束后回到第⼀帧
reverse：与normal的运⾏⽅向相反
alternate：往前播放完了之后，然后再倒带，倒带到头了再往后播放
alternate-reverse：与alternate的运⾏⽅向相反
4.animation-duration  定义动画完成⼀个周期需要多少秒或毫秒
语法：
animation-duration: time;
实例：
animation-duration:2s;
-webkit-animation-duration:2s; /* Safari 和 Chrome */
5.animation-fill-mode  规定当动画不播放时(当动画完成时，或当动画有⼀个延迟未开始播放时)，要应⽤到元素的样式
语法：
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
实例：
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
参数：
设置动画结束后的状态
none：默认值。不设置对象动画之外的状态，DOM未进⾏动画前状态
forwards：设置对象状态为动画结束时的状态，100%或to时，当设置animation-direcdtion为reverse时动画结束后显⽰为keyframes 第⼀帧
backwards：设置对象状态为动画开始时的状态,(测试显⽰DOM未进⾏动画前状态)
both：设置对象状态为动画结束或开始的状态，结束时状态优先
6.animation-iteration-count  定义动画应该播放多少次
语法：
animation-iteration-count: n|infinite;
实例：
animation-iteration-count:3;
-webkit-animation-iteration-count:3; /*Safari and Chrome*/
7.animation-name  为 @keyframes 动画指定名称
语法：
animation-name: keyframename|none;
实例：
animation-name:mymove;
-webkit-animation-name:mymove; /* Safari 和 Chrome */
8.animation--play-state  指定动画是否正在运⾏或已暂停
语法：
animation-play-state: paused|running;
实例：
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
参数：
paused：设置该属性使动画暂停
running：设置该属性使动画继续播放
动画运⾏状态，暂停或继续播放，属性为：running(默认)以及paused. 这个什么时候有⽤的，使⽤animation实现视频播放效果的时候
9.animation-timing-function  指定动画将如何完成⼀个周期
语法：
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
实例：
animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */
参数：
定义动画的速度曲线
ease：动画以低速开始，然后加快，在结束前变慢。
linear：匀速
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束，相对于ease缓慢，速度更均匀
step-start：按keyframes设置逐帧显⽰，第⼀帧为keyframes设置的第⼀帧。
step-end：按keyframes设置逐帧显⽰，第⼀帧为样式的初始值。
steps([, [ start | end ] ]?)：把keyframes⾥设置的⼀帧等分为⼏帧，start为第⼀次显⽰第⼀帧，end第⼀次显⽰样式的初始值，例如：steps(4,start)
cubic-bezier(, , , )：在 cubic-bezier 函数中⾃⼰的值。可能的值是从 0 到 1 的数值。贝兹曲线限制了⾸尾两控制点的位置，通过调整中间两控制点的位置可以灵活得到常⽤的动画效果
⼆、使⽤插件
(1)animate.min.css
@charset "UTF-8";
/*!
* Version - 3.5.2
*
* Copyright (c) 2017 Daniel Eden
*/
.animated{animation-duration:1s;animation-fill-mode:both}.animated.infinite{animation-iteration-
rotate属性count:infinite}.animated.hinge{animation-
duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{animation-
duration:.75s}@keyframes bounce{0%,20%,53%,80%,to{animation-timing-function:cubic-
bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-
bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-
bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}.bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{animation-name:flash}@keyframes pulse{0%{transform:scaleX(1)}50%
{transform:scale3d(1.05,1.05,1.05)}to{transform:scaleX(1)}}.pulse{animation-name:pulse}@keyframes rubberBand{0% {transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%
{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%
{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.rubberBand{animation-name:rubberBand}@keyframes
shake{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80% {transform:translate3d(10px,0,0)}}.shake{animation-name:shake}@keyframes headShake{0%{transf
orm:translateX(0)}6.5% {transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.headShake{animation-timing-function:ease-in-out;animation-name:headShake}@keyframes swing{20%{transform:rotate(15deg)}40% {transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-
5deg)}to{transform:rotate(0deg)}}.swing{transform-origin:top center;animation-name:swing}@keyframes tada{0% {transform:scaleX(1)}10%,20%{transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%
{transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate(-
3deg)}to{transform:scaleX(1)}}.tada{animation-name:tada}@keyframes wobble{0%{transform:none}15%
{transform:translate3d(-25%,0,0) rotate(-5deg)}30%{transform:translate3d(20%,0,0) rotate(3deg)}45%
{transform:translate3d(-15%,0,0) rotate(-3deg)}60%{transform:translate3d(10%,0,0) rotate(2deg)}75%
{transform:translate3d(-5%,0,0) rotate(-1deg)}to{transform:none}}.wobble{animation-name:wobble}@keyframes
jello{0%,11.1%,to{transform:none}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg)
skewY(1.5625deg)}66.6%{transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{transform:skewX(.390625deg) skewY(.390625deg)}88.8%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{animation-name:jello;transform-origin:center}@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0% {opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%
{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%
{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scaleX(1)}}.bounceIn{animation-name:bounceIn}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%
{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%
{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}.bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-
bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%
{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%
{transform:translate3d(5px,0,0)}to{transform:none}}.bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%
{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%
{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}.bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubi
c-
bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-
20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-
5px,0)}to{transform:translateZ(0)}}.bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%
{transform:scale3d(.9,.9,.9)}50%,55%
{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}.bounceOut{animation-
name:bounceOut}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%
{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%
{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}.bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-
20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%
{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}.bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{animation-name:fadeIn}@keyframes
fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}.fadeInDown{animation-
name:fadeInDown}@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0,-
2000px,0)}to{opacity:1;transform:none}}.fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{0% {opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}.fadeInLeft{animation-
name:fadeInLeft}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-
2000px,0,0)}to{opacity:1;transform:none}}.fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{0% {opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}.fadeInRigh
t{animation-
name:fadeInRight}@keyframes fadeInRightBig{0%
{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:none}}.fadeInRightBig{animation-
name:fadeInRightBig}@keyframes fadeInUp{0%
{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}.fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:none}}.fadeInUpBig{animation-
name:fadeInUpBig}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}.fadeOutDown{animation-
name:fadeOutDown}@keyframes fadeOutDownBig{0%
{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}.fadeOutDownBig{animation-
name:fadeOutDownBig}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-
100%,0,0)}}.fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{0%
{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}.fadeOutRight{animation-
name:fadeOutRight}@keyframes fadeOutRightBig{0%
{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}.fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.fadeOutUp{animation-
name:fadeOutUp}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,-
2000px,0)}}.fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes flip{0%{transform:perspective(400px) rotateY(-
1turn);animation-timing-function:ease-out}40%{transform:perspective(400px) translateZ(150px) rotateY(-
190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translateZ(150px) rotateY(-
170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(.95,.95,.95);animation-timing-function:ease-in}to{transform:perspective(400px);animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;animation-name:flip}@keyframes flipInX{0%{transform:perspective(400px)
rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-
visibility:visible!important;animation-name:flipInX}@keyframes flipInY{0%{transform:perspective(400px)
rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);
opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-
visibility:visible!important;animation-name:flipInY}@keyframes flipOutX{0%{transform:perspective(400px)}30% {transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px)
rotateX(90deg);opacity:0}}.flipOutX{animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-
visibility:visible!important;backface-visibility:visible!important;animation-name:flipOutY}@keyframes lightSpeedIn{0% {transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%
{transform:skewX(-5deg);opacity:1}to{transform:none;opacity:1}}.lightSpeedIn{animation-name:lightS
peedIn;animation-timing-function:ease-out}@keyframes lightSpeedOut{0%{opacity:1}to{transform:translate3d(100%,0,0)
skewX(30deg);opacity:0}}.lightSpeedOut{animation-name:lightSpeedOut;animation-timing-function:ease-in}@keyframes rotateIn{0%{transform-origin:center;transform:rotate(-200deg);opacity:0}to{transform-
origin:center;transform:none;opacity:1}}.rotateIn{animation-name:rotateIn}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}to{transform-origin:left
bottom;transform:none;opacity:1}}.rotateInDownLeft{animation-name:rotateInDownLeft}@keyframes rotateInDownRight{0% {transform-origin:right bottom;transform:rotate(45deg);opacity:0}to{transform-origin:right
bottom;transform:none;opacity:1}}.rotateInDownRight{animation-name:rotateInDownRight}@keyframes rotateInUpLeft{0% {transform-origin:left bottom;transform:rotate(45deg);opacity:0}to{transform-origin:left
bottom;transform:none;opacity:1}}.rotateInUpLeft{animation-name:rotateInUpLeft}@keyframes rotateInUpRight{0% {transform-origin:right bottom;transform:rotate(-90deg);opacity:0}to{transform-origin:right
bottom;transform:none;opacity:1}}.rotateInUpRight{animation-name:rotateInUpRight}@keyframes rotateOut{0%{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate(200deg);opacity:0}}.rotateOut{animation-
name:rotateOut}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{animation-name:rotateOutDownLeft}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(-
45deg);opacity:0}}.rotateOutDownRight{animation-name:rotateOutDownRight}@keyframes rotateOutUpLeft{0%{transform-

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。