CSS3动画使用教程-学习网-动画-教程-SEO「css3实现动画效果常用方法」

将CSS3动画视为CSS过渡的更复杂的姐妹，动画在几个要害方面与变换差别：动画不会优雅地降级，假如欣赏器不支撑，则用户命运不佳，另一种方法是使用JavaScript。动画可以重复，并无穷重复，过渡老是有限的。动画使用要害帧，可以创建更复杂和细微不同的效果。可以在播放周期的中心停息动画。全部主流欣赏器的最新版本都支撑CSS3动画。Firefox15及更早版本需要一个-moz-前缀; 以后的版本没有。InternetExplorer版本10和11也支撑没有前缀的动画，全部版本的MicrosoftEdge也是云云。我们可以通过几种方式查抄CSS动画支撑，第一种是通过测试CSSKeyframeRule作为window对象的方法的存在：consthasAnimations='CSSKeyframeRule'inwindow;假如欣赏器支撑@supports规则和CSS.supports()API，我们可以使用它：consthasAnimations=CSS.supports('animation-duration:2s');与过渡一样，我们只能为插值等配置动画，比方颜色值，长度和百分比。创建你的第一个动画我们起首要使用@keyframes规则界说动画，该@keyframes规则有两个目标：配置动画的名称对我们的要害帧规则举行分组让我们创建一个名为的动画pulse：@keyframespulse{}我们的要害帧将在此块中界说。在动画中，要害帧是动作发生转变的点。出格是使用CSS3动画，要害帧规则用于配置动画周期中特定点的属性值。插入要害帧规则中值之间的值。动画至少需要两个要害帧：一个from要害帧，它是我们动画的起始状况，一个to帧，它是它的竣事状况。在每个单独的要害帧块中，我们可以界说要配置动画的属性：@keyframespulse{   from{       transform:scale(0.5);       opacity:.8;   }   to{       transform:scale(1);       opacity:1;   }}此代码将我们的对象从其巨细的一半扩展到其完备巨细，并将不透明度从80％更改为100％。可是，该keyframes规则仅界说了动画。它自己并不会使元素移动，我们需要应用它。让我们界说一个pulse类，我们可以用它将这个动画添加到任何元素：.pulse{   animation:pulse500ms;}在这里，我们使用了animation速记属性来配置动画名称和连续时间。为了播放动画，我们需要@keyframes规则的名称（在这种环境下pulse）和连续时间，其他属性是可选的。属性的顺序animation雷同于transition，可以剖析的第一个值变为的值animation-duration。第二个值成为的值animation-delay，不是CSS局限的要害字或动画属性要害字值的单词被假定为@keyframe规则集名称。与此同时transition，animation也接管动画列表。动画列表是以逗号分隔的值列表。比方，我们可以将脉激动画分成两个规则– pulse和fade：@keyframespulse{   from{       transform:scale(0.5);   }         to{       transform:scale(1);   }}@keyframesfade{   from{       opacity:.5;   }   to{       opacity:1;   }}然后我们可以将它们组合为单个动画的一部门：.pulse-and-fade{   animation:pulse500ms,fade500ms;}动画属性虽然使用animation属性较短，但有时较长的属性更清楚。下面列出了手绘动画属性：animation-delay和animation-duration机能的功能雷同transition-delay和transition-duration。两者都接管时间单元作为值，以秒（s）或毫秒（ms）为单元。负时间值有用animation-delay，但不是animation-duration。让我们.pulse使用longhand属性重写我们的规则集。如许做给了我们以下内容：.pulse{   animation-name:pulse;   animation-duration:500ms;}该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:500ms;   animation-iteration-count:infinite;}或者，使用animation速记属性：.pulse{   animation:pulse500msinfinite;}播放动画：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:500ms;   animation-iteration-count:infinite;   animation-direction:alternate-reverse;}或者，使用速记属性：.pulse{   animation:pulse500msinfinitealternate-reverse;}使用百分比要害帧我们之前的例子是一个简朴的脉激动画。我们可以使用百分比要害帧创建更复杂的动画序列。而不是使用from和to，百分比要害帧表现动画过程中的特定转变点。下面是一个使用名为的动画的示例wiggle：@keyframeswiggle{   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％。在播放动画时，欣赏器将在每个状况之间插值。与前面的示例一样，我们可以将其分配给选择器：/*Ouranimationwillplayonce*/ .wiggle{   animation-name:wiggle;   animation-duration:500ms;}或使用animation速记属性：.wiggle{   animation:wiggle500ms;}这里只有一个问题。当我们的动画竣事时，它会回到原始的动画前状况。要防止这种环境，请使用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属性配置为500ms或更高时，效果最明明 。当animation-fill-mode配置backwards为时，将应用第一个要害帧的属性值，但在延迟已往之前不会执行动画。停息动画如上所述，动画可以停息。转换可以在半途反转，也可以通过切换类名来完全截止。另一方面，动画可以在播放周期的半途停息使用animation-play-state。它有两个界说的值– running和paused-它的初始值是running。让我们看一个使用animation-play-state播放或停息动画的简朴示例。起首，我们的CSS：.wobble{   animation:wobble3sease-ininfiniteforwardsalternate;   animation-play-state:paused;} .running{   animation-play-state:running;}这里，我们有两个声明块：wobble它界说了一个摆动动画，并running配置了一个播放状况。作为我们animation声明的一部门，我们设定了一个animation-play-state值paused。要运行我们的动画，我们将把running类添加到元素中。让我们假设我们的标志包罗一个运行动画按钮，此中id包罗trigger：consttrigger=document.querySelector('#trigger');constmoveIt=document.querySelector('.wobble');trigger.addEventListener('click',function(){   moveIt.classList.toggle('running');});添加.running到我们的元素会覆盖animation-play-state配置的值.wobble，并使动画播放。动画最先，竣事或重复时检测像过渡一样，动画在竣事时会触发事务：animationend。与过渡差别，动画在最先重复时也会触发animationstart和animationiteration发闹事件。与转换一样，您可以使用这些事务在页面上触发另一个操作。也许您可以使用animationstart上下文显示“ 截止动画”按钮，或animationend显示“ 重播”按钮。我们可以使用JavaScript监听这些事务。下面，我们正在听取这个animationend事务：constanimate=document.getElementById('animate');animate.addEventListener('animationend',function(eventObject){   //Dosomething});这里，事务处置惩罚函数也吸收一个事务对象作为其唯一参数。为了确定哪个动画竣事，我们可以查询animationName事务对象的属性。关于机能的注重事项某些属性比其他属性创建机能更好的过渡和动画。假如动画更新了触发重排或从头绘制的属性，则在手机宁静​​板电脑等低功耗装备上可能会表示不佳。触发重排的属性是影响结构的属性。此中包括以下可动画属性：border-width（和border-*-width属性）border（和border-*属性）bottomfont-sizefont-weightheightleftline-heightmargin（和margin-*属性）min-heightmin-widthmax-heightmax-widthpadding（和padding-*属性）righttopvertical-alignwidth在对这些属性举行动画处置惩罚时，欣赏器必需从头计较受影响（每每是相邻）元素的巨细和位置。尽可能使用变换。转换或翻译动画变换（比方，transform:translate(100px,200px)）可以取代top，left，right，和bottom特征。在某些环境下，height和width动画可以用替换scale改造。有时，触发回流（或结构更新）是不可制止的。在这些环境下，尽量削减受影响的元素数目并使用技巧（比方负延迟）来缩短感知的动画持续时间。触发重绘的属性每每是导致颜色更改的属性。这些包括：backgroundbackground-imagebackground-positionbackground-repeatbackground-sizeborder-radiusborder-stylebox-shadowcoloroutlineoutline-coloroutline-styleoutline-width对这些属性的更改比计较结构的更自制，但它们仍旧有成本。对计较举行更改box-shadow而且border-radius计较起来出格昂贵，尤其是对于低功耗装备。配置动画这些属性时要警惕。相关文章推荐CSS教程：CSSO调试和优化  在成为CSS大师的门路上，您需要知道若何解除故障并优化CSS。您若何诊断和修复渲染问题？您若何确保您的CSS不[…]...内联，外部和内部CSS样式之间的区别  有三种方法可以为网站添加CSS样式：可以使用内部CSS并在HTML文档部门包罗CSS规[…]...TypeScript简介：Web的静态类型  TypeScript是使用JavaScript创建更好体验的浩瀚实验之一。TypeScript毕竟是什么？[…]...使用Nginx设置负载平衡的方法  负载平衡是扩展应用程序并提高其机能和冗余的绝佳方法，Nginx是一种盛行的Web办事器软件，可以设置为简朴且功[…]...APPIUM–用于测试的主动化工具  Appium最初由DanCueller开辟，用于操纵AppleiOS的UI主动化框架对本机移动应用程序运行[…]...CSS3动画使用教程