animation属性(CSS设置六个动画属性)

发布时间：2021-05-28 14:11 所属分类：热门主题浏览次数：

　　animation属性

　　效果：animation特点是一个简写特点，用于设置六个动画特点。

　　语法：

　　animation:namedurationtiming-functiondelayiteration-countdirection;

　　阐明：animation特点能够设置的六个动画特点分别为：

　　●animation-name：规则需要绑定到选择器的keyframe称号。

　　●animation-duration：规则完成动画所花费的时间，以秒或毫秒计。

　　●animation-timing-function：规则动画的速度曲线。

　　●animation-delay：规则在动画开端之前的推迟。

　　●animation-iteration-count：规则动画应该播映的次数。

　　●animation-direction：规则是否应该轮番反向播映动画。

　　注：需始终设置animation-duration特点，否则当时长为0时，就不会播映动画了。

　　css3animation特点的运用示例

　　注释：InternetExplorer9以及更早的版别不支持animation特点。

　　CSS设置六个动画属性

　　一：transition

　　transition允许咱们在CSS特点改变时给它增加一个过度的动画作用。一般状况下，CSS特点改变是立即收效的，新的特点值在超级短的时刻内替换掉旧的特点值，然后浏览器重新制作款式内容（或许是reflow或许repaint）。大部分状况下会感觉款式改变突兀，而transition则能够增加顺滑的一个改变作用。例如：

　　.content{

　　background:magenta;

　　transition:background200msease-in50ms;

　　}

　　.content:hover{

　　background:yellow;

　　transition:background200msease-out50ms;

　　}

　　transition的兼容性，不算差，基本上移动设备都能够运用了，而且能做到渐进增强，支撑的便有过渡作用，不支撑的就是直接切换，所以能够放心运用。

　　transition特点

　　CSS的transition有四个特点：

　　transition-delay延迟多久后开端动画

　　transition-duration过渡动画的一个持续时刻

　　transition-property履行动画对应的特点，例如color，background等，能够运用all来指定一切的特点

　　transition-timing-function跟着时刻推进，动画改变轨道的核算方式，常见的有：linear，ease，ease-in，ease-out，cubic-bezier(...)等。

　　这四个特点能够简写成为：

　　.class{

　　transition:}

　　例如前边的那个比如，当.content元素hover时，50毫秒后布景颜色从magenta突变到yellow，持续时刻200毫秒，运用的是ease-out的算法。留意下：transition收效的是对应的挑选器的特点，例如.content:hover中的transition就是从.content的magenta到yellow过渡作用的操控，而.content中的transition则是操控不hover时，布景颜色从yellow到magenta的改变进程。

　　all这个特点值是这样的，它对应挑选器下的元素的一切CSS特点收效，不管在哪里声明的CSS规矩，并不局限于在同个代码块下。

　　假如需求不同特点对应不同的作用，能够这么来写：

　　.demo{

　　transition-property:all,border-radius,opacity;

　　transition-duration:1s,2s,3s;

　　/*当这样运用时，确保all在第一个，因为假如all在后边的话，它的规矩会掩盖掉前边的特点*/

　　}

　　transition的none特点较少用到，一般用于移除本来有的动画作用。none没法和逗号一起运用来移除特定特点的动画作用，只能直接干掉transition，假如要移除特定的特点作用，能够重写transition而不把要移除的特点写进去，或许比较trick的做法是设置duration为0。

　　并不是一切的CSS特点都是能够增加transition作用的。详细能够参阅文档：animatableproperties。或许经常遇到的就是display这个特点并不能增加transition作用，你能够考虑运用visibility或许后边会提及的animation。

　　关于transition-timing-function的各个算法的一个改变曲线是怎样样的，咱们能够运用chrome的开发者工具来看一下，CSS中你编写了对应的transition后，把鼠标移到transition-timing-function的那个值前边，如下图：

　　3.jpg

　　这样你便能够很明晰地看到这个算法的一个改变轨道是怎样用的，然后挑选符合自己需求的一个算法。

　　transition相关的事情

　　transitionend事情会在transition动画完毕的时候触发。一般咱们会在动画完毕后履行一些办法，例如继续下一个动画作用或许其他。Zepto.js中的动画办法都是运用CSS动画特点来处理，而其中动画运行后的回调便应该是运用这个事情来处理。

　　transitionend事情触发时会传入一些动画相关的参数，例如：propertyName，elapsedTime，详细内容能够参阅：transitionend。

　　transition运用

　　transition在许多UI框架中是很常见的特点，当咱们开发一个交互作用的时候，从某个状况抵达别的一个状况时，transition能够使得这个进程变得愈加舒适和顺滑。例如上边的hover时的布景颜色的切换，操控元素的显现和隐藏时运用opacity来完成渐隐渐现。

　　当transition配合上transform供给的多样化的元素改变能力后，便能够制作出许多风趣的交互突变作用了。最近运用进程中做的一个简单作用的比如，点击检查。

　　很常见还有表单input报错时边框变红，按钮hover时布景突变等，许多的CSS交互作用会因为transition变得愈加天然。

　　二：animation

　　尽管transition现已供给了很棒的动画作用了，可是咱们只能够操控从一个状况抵达别的一个状况，没法来操控多个状况的不断改变，而animation而帮助咱们完成了这一点。运用animation的条件是咱们需求先运用@keyframes来界说一个动画作用，@keyframes界说的规矩能够用来操控动画进程中的各个状况的状况，语法大抵是这个姿态：

　　@keyframesW{

　　from{left:0;top:0;}

　　to{left:100%;top:100%;}

　　}

　　@keyframes关键词后跟动画的姓名，然后是一个块，块中有动画进展的各个挑选器，挑选器后的块则依旧是咱们常见的各个CSS款式特点。

　　在这里，操控动画的整个进程的挑选器很重要，语法相对简单，你能够运用from或许0%来表示开端状况，而to或100%来表示完毕状况。中心的部分你都能够运用百分比来进行表示。挑选器后的块则是在抵达这个进展状况时元素的款式应该是怎样样的，整个的过渡动画在这个的操控基础上由浏览器去制作。

　　同样地，不是一切的特点都能够有动画作用，MDN保护了一份CSS动画的特点列表可供参阅。

　　一般来说，多个状况下的相同特点的值应该是能够取到它们的中心值的，例如left从0%到100%，假如没法取到中心值，如height从auto到100px，有或许出现奇怪的一些状况，而且不同浏览器对此的处理也不尽相同，所以请尽量防止这种状况。

　　animation特点

　　animation的特点比transition多，如下：

　　animation-name你需求的动画作用的@keyframes的姓名。

　　animation-delay和transition-delay一样，动画延迟的时刻。

　　animtaion-duration和transition-duration一样，动画持续的时刻。

　　animation-direction动画的一个方向操控。

　　默认是normal，假如是上述的left从0%到100%，那么默认是从左到右。假如这个值是reverse，那么就是从右到左。

　　因为animation供给了循环的操控，所以还有两个值是alternate和alternate-reverse，这两个值会在每次循环开端的时候调转动画方向，只不过是开端的方向不同。

　　例如仍是left的比如，假定设置了animation-direction:alternate;animation-iteration-count:infinite;，那么这个元素从左到右移动后，便调转方向，从右到左，如此循环。

　　animation-fill-mode这个特点用来操控动画前后，@keyframes中供给的CSS特点如何运用到元素上。

　　默认值是none，还有其他三个挑选：forwards，backwards，both。

　　假定是none，那么动画前后，动画中声明的CSS特点都不会运用到元素上。即动画作用履行后，元素便恢复正常状况。

　　假如是forwards，那么动画完毕后，会把最终状况的CSS特点运用到元素上，即坚持动画最终的姿态。而backwards则相反，both则都会，核算得出最终的一个结果。

　　animation-timing-function和transition-timing-function一样，动画改变轨道的算法。

　　animation-iteration-count动画循环次数，假如是infinite则无限次。风趣的是，支撑小数，即0.5表示动画履行到一半。

　　animation-play-state动画履行的状况，两个值running或许paused，能够用来操控动画是否履行。

　　上述这些特点能够简写为：

　　.class{

　　animation:}

　　略长，当然，平时运用中或许是省略部分参数的。

　　animation需求留意的东西

　　1.优先级

　　记得CSS中的层叠概念么，优先级高的特点会掩盖优先级低的特点，当animation运用到元素中时，动画运行进程中，@keyframes声明的CSS特点优先级最高，比行内声明!important的款式还要高。现在浏览器的完成是这姿态的，可是标准文档中的说法应该是能够被!important声明的特点所掩盖。

　　多个动画的顺序

　　因为animation-name是能够指定多个动画作用的，所以这里便会出现动画的一个顺序问题。后指定的动画会掩盖掉前边的，例如：

　　#colors{

　　animation-name:red,green,blue;/*假定这些keyframe都是修改color这个特点*/

　　animation-duration:5s,4s,3s;

　　}

　　上述代码的动画作用会是这样：前3秒是blue，然后接着1秒是green，最终1秒是red。整个掩盖的规矩是比较简单的。

　　display的影响

　　假如一个元素的display设置为none，那么在它或许它的子元素上的动画作用便会停止，而重新设置display为可见后，动画作用会重新重头开端履行。

　　animation相关事情

　　咱们能够通过绑定事情来监听animation的几个状况，这些事情分别是：

　　animationstart动画开端事情，假如有delay特点的话，那么比及动画真实开端再触发，假如是没有delay，那么当动画作用运用到元素时，这个事情会被触发。