CSS3动画使用教程

　　将CSS3动漫视作CSS衔接的更繁杂的姊妹，动漫在好多个重要层面与转换不一样：动漫不容易雅致地退级，假如电脑浏览器不兼容，则客户运势不佳，另一种方式是应用JavaScript。

　　动漫能够反复，并无尽反复，衔接一直比较有限的。

　　动漫应用关键帧，能够建立更繁杂和细微差别的实际效果。

　　能够在播放周期时间的正中间中止动漫。

　　全部主流浏览器的最新版都适用CSS3动漫。Firefox 15及更早版本号必须一个-moz-作为前缀;之后的版本号沒有。Internet Explorer版本号10和11也适用沒有作为前缀的动漫，全部版本号的Microsoft Edge也是这般。

　　我们可以根据几类方法查验CSS动漫适用，第一种是根据检测CSSKeyframeRule做为window目标的方式的存有：

　　const hasAnimations = 'CSSKeyframeRule' in window;

　　假如电脑浏览器适用@supports标准和CSS.supports()API，我们可以应用它：

　　const hasAnimations = CSS.supports('animation-duration: 2s');

　　与衔接一样，大家只有为插值法等设定动漫，比如颜色值，长短和百分数。

　　建立你的第一个动漫

　　大家最先要应用@keyframes标准界定动漫，该@keyframes标准有两个目地：

　　设定动漫的名字

　　对大家的关键帧标准开展排序

　　使我们建立一个名叫的动漫pulse：

　　@keyframes pulse {}

　　大家的关键帧将在这里块中界定。在动漫中，关键帧是姿势产生变化的点。尤其是应用CSS3动漫，关键帧标准用以设定动漫周期时间中特殊点的特性值。插进关键帧标准中值中间的值。

　　动漫最少必须2个关键帧：一个from关键帧，它是大家动漫的起止情况，一个to帧，它是它的完毕情况。在每一个独立的关键帧块中，我们可以界定要设定动漫的特性：

　　@keyframes pulse { from { transform: scale(0.5); opacity: .8; } to { transform: scale(1); opacity: 1; }}

　　此编码将大家的目标从其尺寸的一半拓展到其详细尺寸，并将不透明度从80%更改成100%。

　　可是，该keyframes标准仅界定了动漫。它自身并不会使原素挪动，大家必须运用它。使我们界定一个pulse类，大家可以用它将这一动漫加上到一切原素：

　　.pulse { animation: pulse 1000ms;}

　　在这儿，大家应用了animation巧记特性来设定动漫名字和延迟时间。为了更好地播放视频动漫，大家必须@keyframes标准的名字(在这类状况下pulse)和延迟时间，别的特性是可选择的。

　　特性的次序animation类似transition，能够分析的第一个值变成的值animation-duration。第二个值变成的值animation-delay，并不是CSS范畴的关键词或动漫特性关键词值的英语单词被假设为@keyframe标准集名字。

　　此外transition，animation也接纳动漫目录。动漫目录是以分号隔开的值目录。比如，我们可以将单脉冲动漫分为2个标准 –pulse和fade：

　　@keyframes pulse { from { transform: scale(0.5); } to { transform: scale(1); }}@keyframes fade { from { opacity: .5; } to { opacity: 1; }}

　　随后我们可以将他们组成为单独动漫的一部分：

　　.pulse-and-fade { animation: pulse 1000ms, fade 1000ms;}

　　动漫特性

　　尽管应用animation特性较短，但有时候较长的特性更清楚。下边列举了手绘动画特性：

　　animation-delay和animation-duration特性的作用相近transition-delay和transition-duration。两者都接纳时间单位做为值，以秒(s)或ms(ms)为企业。负時间值合理animation-delay，但并不是animation-duration。

　　使我们.pulse应用longhand特性调用大家的标准集。那样做给了大家以下几点：

　　.pulse { animation-name: pulse; animation-duration: 1000ms;}

　　该animation-name物业管理非常简易。它的值能够是标准none的名字@keyframes。动漫名字基本上沒有限定。CSS的关键词，比如initial，inherit，default，和none被严禁的。大部分标点符号标识符都失灵，而英文字母，下横线，数据和符号表情(及其别的Unicode)标识符一般会起功效。为了更好地清楚和可扩展性，最好是为动漫出示说明性名字，并防止应用CSS特性或符号表情做为名字。

　　循环系统或不循环系统：animation-iteration-count特性

　　假如你追随自身的编码，你能发觉这一动漫只产生一次。大家期待大家的动漫反复。因此，大家必须animation-iteration-count。

　　animation-iteration-count特性接纳大部分标值，整数金额和十进制数是有效值。可是，针对十进制数据，动漫将在最后一个动漫周期时间的半途终止，并以to情况完毕，负数animation-iteration-count被视作同样1。

　　要使动漫无期限运作，请应用infinite关键词。动漫将播放视频无尽次。自然，infinite事实上代表着在卸载掉文本文档以前，电脑浏览器对话框关掉，动漫款式被删掉或机器设备关掉。使我们的动漫无尽：

　　.pulse { animation-name: pulse; animation-duration: 1000ms; animation-iteration-count: infinite;}

　　或是，应用animation巧记特性：

　　.pulse { animation: pulse 1000ms infinite;}

　　播放视频动漫：animation-direction特性

　　可是，大家的动漫依然存在的问题。它并不像反复大家的变大动漫那么多单脉冲。大家要想的是这一原素能够往上和往下拓展。键入animation-direction。

　　animation-direction特性接纳四个值之一：

　　normal：初值，按特定播放视频动漫

　　reverse：旋转from和to表明并反方向播放视频动漫

　　alternate：反方向播放视频双数序号的动漫循环系统

　　alternate-reverse：反方向播放视频合数动漫周期时间

　　再次大家当今的事例，reverse将大家的目标缩小0.5倍。应用alternate会将大家的目标放缩为合数循环系统，往下放缩为双数。反过来，应用alternate-reverse会将大家的目标变小为合数循环系统，往上放缩为双数循环系统。因为它是大家要想的实际效果，大家将大家的animation-direction特性设定为alternate-reverse：

　　.pulse { animation-name: pulse; animation-duration: 1000ms; animation-iteration-count: infinite; animation-direction: alternate-reverse;}

　　或是，应用巧记特性：

　　.pulse { animation: pulse 1000ms infinite alternate-reverse;}

　　应用百分数关键帧

　　大家以前的事例是一个简易的单脉冲动漫。我们可以应用百分数关键帧建立更繁杂的动漫编码序列。而不是应用from和to，百分数关键帧表明动漫全过程中的特殊转变 点。下边是一个应用名叫的动漫的实例wiggle：

　　@keyframes wiggle { 25% { transform: scale(.5) skewX(-5deg) rotate(-5deg); } 50% { transform: skewY(5deg) rotate(5deg); } 75% { transform: skewX(-5deg) rotate(-5deg) scale(1.5); } 100% { transform: scale(1.5); }}

　　大家在这儿应用了25%的增加量，但这种关键帧可能是5%，10%或33.2%。在播放动漫时，电脑浏览器将在每一个情况中间插值法。与前边的实例一样，我们可以将其分派给选择符：

　　/* Our animation will play once */.wiggle { animation-name: wiggle; animation-duration: 1000ms;}

　　或应用animation巧记特性：

　　.wiggle { animation: wiggle 1000ms;}

　　这儿只有一个难题。在我们的动漫完毕时，它会返回初始的动漫前情况。要避免这类状况，请应用animation-fill-mode特性。

　　animation-fill-mode

　　动漫在逐渐以前或停止播放以后对特性沒有危害。但如同您在wiggle实例中见到的那般，一旦动漫完毕，它将修复到动漫前的情况。拥有animation-fill-mode，我们可以在动漫开始与结束以前填好这种情况。

　　该animation-fill-mode特性接纳四个值之一：

　　none：动漫在沒有实行时沒有实际效果

　　forwards：当动漫完毕时，完毕情况的特性值仍将可用

　　backwards：动漫延迟时间期内将运用第一个关键帧的特性值

　　both：对二者的危害forwards和backwards可用

　　因为大家期待大家的动漫原素维持其最后的变大情况，大家将再次应用animation-fill-mode: forwards。(animation-fill-mode: both也会合理。)

　　animation-fill-mode: backwards当animation-delay特性设定为1000ms或高些时，实际效果最显著。当animation-fill-mode设定backwards为时，将运用第一个关键帧的特性值，但在延迟时间以往以前不容易实行动漫。

　　中止动漫

　　如上所述，动漫能够中止。变换能够在半途翻转，还可以根据转换类名来彻底终止。另一方面，动漫能够在播放周期时间的半途暂停使用animation-play-state。它有两个界定的值 –running和paused- 它的初值是running。

　　使我们看一个应用animation-play-state播放视频或中止动漫的简易实例。最先，大家的CSS：

　　.wobble { animation: wobble 三秒 ease-in infinite forwards alternate; animation-play-state: paused;}.running { animation-play-state: running;}

　　这儿，大家有两个申明块：wobble它界定了一个晃动动漫，并running设定了一个播放视频情况。做为大家animation申明的一部分，大家设置了一个animation-play-state值paused。要运作大家的动漫，大家将把running类加上到原素中。使我们假定大家的标识包括一个运作动漫按键，在其中id包括trigger：

　　const trigger = document.querySelector('#trigger');const moveIt = document.querySelector('.wobble');trigger.addEventListener('click', function() { moveIt.classList.toggle('running');});

　　加上.running到大家的原素会遮盖animation-play-state设定的值.wobble，并使动漫播放视频。

　　动漫逐渐，完毕或反复时检验

　　像衔接一样，动漫在完毕的时候会开启事情：animationend。与衔接不一样，动漫在逐渐反复时也会开启animationstart和animationiteration产生事情。与变换一样，您能够应用这种事情在网页页面上开启另一个实际操作。或许您能够应用animationstart前后文表明“终止动漫”按键，或animationend表明“回播”按键。

　　我们可以应用JavaScript监视这种事情。下边，大家已经征求这一animationend事情：

　　const animate = document.getElementById('animate');animate.addEventListener('animationend', function(eventObject) { // Do something});

　　这儿，事故处理涵数也接受一个事情目标做为其唯一主要参数。为了更好地明确哪一个动漫完毕，我们可以查看animationName事情目标的特性。

　　有关特性的常见问题

　　一些特性比别的特性建立特性更强的衔接和动漫。假如动漫升级了开启重新排列或再次绘图的特性，则在手机友谊​​板电脑上等功耗机器设备上很有可能会主要表现不佳。

　　开启重新排列的特性是危害合理布局的特性。在其中包含下列可动漫特性：

　　border-width(和border-*-width特性)border(和border-*特性)bottomfont-sizefont-weightheightleftline-heightmargin(和margin-*特性)min-heightmin-widthmax-heightmax-widthpadding(和padding-*特性)righttopvertical-alignwidth

　　在对这种特性开展动漫解决时，电脑浏览器务必再次测算受影响(一般是邻近)原素的尺寸和部位。尽量应用转换。变换或汉语翻译动漫转换(比如，transform: translate(100px,201080x))能够替代top，left，right，和bottom特点。在一些状况下，height和width动漫可以用取代scale更新改造。

　　有时候，开启流回(或合理布局升级)是难以避免的。在这种状况下，尽量避免受影响的原素总数并使用技巧(比如负延迟时间)来减少认知的动漫延迟时间。

　　开启重绘的特性一般是造成色调变更的特性。这种包含：

　　backgroundbackground-imagebackground-positionbackground-repeatbackground-sizeborder-radiusborder-stylebox-shadowcoloroutlineoutline-coloroutline-styleoutline-width

　　对这种特性的变更比测算合理布局的更划算，但他们依然有成本费。对测算开展变更box-shadow而且border-radius测算起來尤其价格昂贵，尤其是针对功耗机器设备。设定动漫这种特性时要当心。