CSS制作动画的属性有哪些

这篇文章给大家分享的是有关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，那么当动画效果应用到元素时，这个事件会被触发。

　　animationend动画结束的事件，和transitionend类似。如果有多个动画，那么这个事件会触发多次，像上边的例子，这个事件会触发三次。如果animation-iteration-count设置为infinite，那么这个事件则不会被触发。

　　animationiteration动画循环一个生命周期结束的事件，和上一个事件不一样的是，这个在每次循环结束一段动画时会触发，而不是整个动画结束时触发。无限循环时，除非duration为0，否则这个事件会无限触发。

感谢各位的阅读！关于“CSS制作动画的属性有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！