老铁们，大家好，相信还有很多朋友对于animation动画属性和animation用途的相关问题不太懂，没关系，今天就由我来为大家分享分享animation动画属性以及animation用途的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！
一、动画animation transition 属性
1、animation属性是一个简写属性，用于设置动画属性：
animation-name：规定@keyframes动画的名称。
animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function：规定动画的速度曲线。默认是"ease"。
animation-delay：规定动画何时开始。默认是 0
animation-iteration-count：规定动画被播放的次数。默认是 1。
animation-direction：规定动画是否在下一周期逆向地播放。默认是"normal"。
animation-fill-mode：规定对象动画时间之外的状态
2、 transition 属性
语法：transition: property duration timing-function delay;默认值 all 0 ease 0
transition-property 指定CSS属性的name，transition效果
其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线），特定的 cubic-bezier曲线。(x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.
transition-delay 定义transition效果开始的时候
transform: scale(1.1, 1.1);放大
本身img盒子上加过度效果transition: all 0.5s;
img的父级盒子加 overflow: hidden;
二、CSS3 animation动画,循环间的延时执行该怎么弄
1、@keyframes规则。from{属性：值;} to{属性：值;}。
2、0%{属性：值;} 100%{属性：值;}0%是动画的开始，100%是动画的完成。可以在二者之间加入25%，50%等。
3、将动画绑定到选择器：在样式中，设置动画属性animation，自定义动画名称和时长。
4、规定动画开始时的等待时间：animation-delay：时间；可以为秒、毫秒2s，2ms。
5、播放次数：animation-iteration-count：次数；永久播放的值取infinite。
6、动画速度曲线：animation-timing-function：变化类型；变化类型有：linear匀速；ease-in开始慢；ease-out结束慢；ease动画有一个缓慢的开始，然后快，结束慢。
animation属性是一个简写属性，用于设置六个动画属性：
规定需要绑定到选择器的 keyframe名称。
规定完成动画所花费的时间，以秒或毫秒计。
规定是否应该轮流反向播放动画。
注释：请始终规定 animation-duration属性，否则时长为 0，就不会播放动画了。
三、CSS详细认识制作动画的几个属性
基本上我们会有这样的一个简单的概念，CSS的动画效果由浏览器控制和渲染，理论上比 JavaScript的动画效果性能好，但是控制上没有 JavaScript那么灵活方便。而css动画是分成 transform，transition和 animation三个部分，其中 transfrom主要是控制元素变形，并没有一个时间控制的概念，而 transition和 animation才是动画的重点部分，它们可以控制在一个时间段里，元素在两个或以上的状态切换的效果。
transition允许我们在 CSS属性变化时给它添加一个过度的动画效果。通常情况下，CSS属性变化是立即生效的，新的属性值在超级短的时间内替换掉旧的属性值，然后浏览器重新绘制样式内容（可能是 reflow或者 repaint）。大部分情况下会感觉样式变化突兀，而 transition则可以添加顺滑的一个变化效果。例如：
transition: background 200ms ease-in 50ms;
transition: background 200ms ease-out 50ms;
}transition的兼容性，不算差，基本上移动设备都可以使用了，并且能做到渐进增强，支持的便有过渡效果，不支持的便是直接切换，所以可以放心使用。
transition-delay延迟多久后开始动画
transition-duration过渡动画的一个持续时间
transition-property执行动画对应的属性，例如 color，background等，可以使用 all来指定所有的属性
transition-timing-function随着时间推进，动画变化轨迹的计算方式，常见的有：linear，ease，ease-in，ease-out，cubic-bezier(...)等。这四个属性可以简写成为：
transition:}例如前边的那个例子，当.content元素 hover时，50毫秒后背景颜色从 magenta渐变到 yellow，持续时间 200毫秒，使用的是 ease-out的算法。留意下：transition生效的是对应的选择器的属性，例如.content:hover中的 transition便是从.content的 magenta到 yellow过渡效果的控制，而.content中的 transition则是控制不 hover时，背景颜色从 yellow到 magenta的变化过程。
all这个属性值是这样的，它对应选择器下的元素的所有 CSS属性生效，无论在哪里声明的 CSS规则，并不局限于在同个代码块下。
如果需要不同属性对应不同的效果，可以这么来写：
transition-property: all, border-radius, opacity;
transition-duration: 1s, 2s, 3s;
/*当这样使用时，确保 all在第一个，因为如果 all在后边的话，它的规则会覆盖掉前边的属性*/
}transition的 none属性较少用到，一般用于移除原本有的动画效果。none没法和逗号一起使用来移除特定属性的动画效果，只能直接干掉 transition，如果要移除特定的属性效果，可以重写 transition而不把要移除的属性写进去，或者比较 trick的做法是设置 duration为 0。
并不是所有的 CSS属性都是可以添加 transition效果的。详细可以参考文档：animatable properties。可能经常遇到的就是 display这个属性并不能添加 transition效果，你可以考虑使用 visibility或者后边会提及的 animation。
关于 transition-timing-function的各个算法的一个变化曲线是怎么样的，我们可以使用 chrome的开发者工具来看一下，CSS中你编写了对应的 transition后，把鼠标移到 transition-timing-function的那个值前边，如下图：
这样你便可以很清晰地看到这个算法的一个变化轨迹是怎么用的，然后选择符合自己需要的一个算法。
transitionend事件会在 transition动画结束的时候触发。通常我们会在动画结束后执行一些方法，例如继续下一个动画效果或者其他。Zepto.js中的动画方法都是使用 CSS动画属性来处理，而其中动画运行后的回调便应该是使用这个事件来处理。
transitionend事件触发时会传入一些动画相关的参数，例如：propertyName，elapsedTime，详细内容可以参考：transitionend。
transition在很多 UI框架中是很常见的属性，当我们开发一个交互效果的时候，从某个状态到达另外一个状态时，transition可以使得这个过程变得更加舒适和顺滑。例如上边的 hover时的背景颜色的切换，控制元素的显示和隐藏时使用 opacity来实现渐隐渐现。
当 transition配合上 transform提供的多样化的元素变化能力后，便可以绘制出很多有趣的交互渐变效果了。最近使用过程中做的一个简单效果的例子，点击查看。
很常见还有表单 input报错时边框变红，按钮 hover时背景渐变等，很多的 CSS交互效果会因为 transition变得更加自然。
虽然 transition已经提供了很棒的动画效果了，但是我们只能够控制从一个状态到达另外一个状态，没法来控制多个状态的不断变化，而 animation而帮助我们实现了这一点。使用 animation的前提是我们需要先使用@keyframes来定义一个动画效果，@keyframes定义的规则可以用来控制动画过程中的各个状态的情况，语法大抵是这个样子：
}@keyframes关键词后跟动画的名字，然后是一个块，块中有动画进度的各个选择器，选择器后的块则依旧是我们常见的各个 CSS样式属性。
在这里，控制动画的整个过程的选择器很重要，语法相对简单，你可以使用 from或者 0%来表示起始状态，而 to或 100%来表示结束状态。中间的部分你都可以使用百分比来进行表示。选择器后的块则是在到达这个进度状态时元素的样式应该是怎么样的，整个的过渡动画在这个的控制基础上由浏览器去绘制。
同样地，不是所有的属性都可以有动画效果，MDN维护了一份 CSS动画的属性列表可供参考。
通常来说，多个状态下的相同属性的值应该是可以取到它们的中间值的，例如 left从 0%到 100%，如果没法取到中间值，如 height从 auto到 100px，有可能出现奇怪的一些状况，并且不同浏览器对此的处理也不尽相同，所以请尽量避免这种情况。
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，可以用来控制动画是否执行。
animation:}略长，当然，平时使用中可能是省略部分参数的。
记得 CSS中的层叠概念么，优先级高的属性会覆盖优先级低的属性，当 animation应用到元素中时，动画运行过程中，@keyframes声明的 CSS属性优先级最高，比行内声明!important的样式还要高。现在浏览器的实现是这样子的，但是标准文档中的说法应该是可以被!important声明的属性所覆盖。
由于 animation-name是可以指定多个动画效果的，所以这里便会出现动画的一个顺序问题。后指定的动画会覆盖掉前边的，例如：
animation-name: red, green, blue;/*假设这些 keyframe都是修改 color这个属性*/
animation-duration: 5s, 4s, 3s;
}上述代码的动画效果会是这样：前 3秒是 blue，然后接着 1秒是 green，最后 1秒是 red。整个覆盖的规则是比较简单的。
如果一个元素的 display设置为 none，那么在它或者它的子元素上的动画效果便会停止，而重新设置 display为可见后，动画效果会重新重头开始执行。
我们可以通过绑定事件来监听 animation的几个状态，这些事件分别是：
animationstart动画开始事件，如果有 delay属性的话，那么等到动画真正开始再触发，如果是没有 delay，那么当动画效果应用到元素时，这个事件会被触发。
animationend动画结束的事件，和 transitionend类似。如果有多个动画，那么这个事件会触发多次，像上边的例子，这个事件会触发三次。如果 animation-iteration-count设置为 infinite，那么这个事件则不会被触发。
animationiteration动画循环一个生命周期结束的事件，和上一个事件不一样的是，这个在每次循环结束一段动画时会触发，而不是整个动画结束时触发。无限循环时，除非 duration为 0，否则这个事件会无限触发。
animation可以实现控制在多个状态下进行动画切换，所以应用的场景比 transition要广泛得多，可以使用 animation实现大量的动效.
好了，关于animation动画属性和animation用途的问题到这里结束啦，希望可以解决您的问题哈！
