CSS动画属性代表什么？animation=animation-name+animation-duration+animation-timing-function+animation-delay+animation-iteration-count+animation-direction+animation-fill-mode+animation-play-stateAnimation-name指定应用的一系列动画，每个名称对应于由@keyframes.定义的动画序列初始值*/动画名称：无；}*inherit：从父类继承css属性initial：使用浏览器初始css属性unset：如果父类中有对应的属性，则继承。如果没有对应的属性，则使用初始默认值，即inherit和initial*Animation-duration。一个动画循环的时长，单位为秒（s）或毫秒（ms），没有单位的取值无效。Animation-timing-function缓动函数定义了CSS动画在每个动画周期中执行的速度。一个或多个值。对于关键帧动画，定时函数作用于一个关键帧周期而不是整个动画周期，即从关键帧开始到关键帧结束为止。关键帧块中定义的缓动函数（动画计时函数）应用于关键帧；如果关键帧没有定义缓动函数，则使用整个动画中定义的缓动函数。/*关键字值*/animation-timing-function:ease;动画计时功能：缓入；动画计时功能：缓出；动画计时功能：缓入缓出；animation-timing-function:linear;动画计时功能：逐步开始；animation-timing-function:step-end;/*函数值*/animation-timing-function:cubic-bezier(0.1,0.7,1.0,0.1);animation-timing-function:steps(4,end);animation-timing-function:frames(10);/*多个动画*/animation-timing-function:ease,step-start,cubic-bezier(0.1,0.7,1.0,0.1);/*全局值*/animation-timing-function:inherit;animation-timing-function:initial;animation-timing-function:unset;timing-function表示一个数学函数，它描述了过渡或动画中一维值的变化率。这基本上允许您自己定义加速曲线，以便动画的速度在动画过程中发生变化。这些函数通常称为缓动函数。~~~~timing-functiondescriptionease该关键字表示计时函数cubic-bezier(0.25,0.1,0.25,1.0)。这个函数和ease-in-out类似，只不过开始的时候加速比较快，但是到了中间，加速度已经开始变慢了。ease-in这个关键字表示计时函数cubic-bezier(`0.42,0.0,1.0,1.0`)。动画开始缓慢，然后逐渐加速，直到达到最终状态，动画突然停止。ease-out这个关键字代表时序函数cubic-bezier(`0.0,0.0,0.58,1.0`)。动画开始时很快，然后逐渐减慢到最终状态。ease-in-out该关键字表示计时函数cubic-bezier(`0.42,0.0,0.58,1.0`)。使用这个计时函数，动画开始表现得像一个缓入函数，当动画结束时它表现得像一个缓出函数。linear这个关键字表示计时函数cubic-bezier(`0.0,0.0,1.0,1.0`)。使用这个定时函数，动画以恒定的速度从初始状态过渡到最终状态。step-start这个关键字代表了计时函数steps(1,start)。使用这个计时函数，动画会立即跳转到结束状态，并一直停留在结束状态，直到动画结束。step-end该关键字表示计时函数steps(1,end)。使用这个计时功能，动画会一直保持在初始状态，直到动画结束，然后立即跳转到结束状态。计时函数1.三次贝塞尔曲线的子集cubic-bezier()这些曲线是连续的，一般用于动画中的平滑过渡，也称为缓动函数（_easingfunctions_）。贝塞尔曲线由四个点P0、P1、P2和P3定义。P0和P3是曲线的起点和终点。P0为(0,0)表示初始时间和初始状态，P3为(1,1)表示结束时间和最终状态。Px(time,status).cubic-bezier(x1,y2,x2,y2)x1_,_y1_,_x2_,_y2是类型的值，分别代表当前点P1和P2的横坐标和纵坐标定义三次贝塞尔曲线，X1和X2必须在[0,1]范围内，否则当前值无效。2.阶梯函数step()定义了一个阶梯函数，将取值范围等分步长。步进函数的这个子类有时也称为步进函数。steps(number_of_steps,direction)number_of_steps是一个正整数(>0)用来表示划分的步数direction表示函数左连续(start)，右连续(right)steps(5,end)有5步，最后一个发生在动画结束之前。steps(2,start)一个两步楼梯，第一个发生在动画开始时。animation-delay定义动画开始的时间，即从应用于元素的动画动画开始前的时间长度。默认值为0s（该值必须有单位，s或ms）。定义负值将导致动画立即开始。但是动画将在其动画序列中的某处开始。例如，如果设置了-1s的值，则动画将在其动画序列的第一秒立即开始。animation-iteration-count定义了动画在结束前运行的次数，可以是1次，也可以是无限循环（infinite）。如果指定了多个值，则每次播放动画时，都会使用列表中的下一个值，使用最后一个值再循环回到第一个值。（比如“1,2”表示第一个动画循环一次，第二个动画循环两次，然后像上面一样重复）animation-direction表示动画是否反向播放，取值如下：#normal动画在每次循环Loop中向前移动，循环结束，动画重置到起点重新开始（默认值）。animation-direction:normal#reverse反向运行动画，动画在每个循环结束时从头到尾运行。animation-direction:reverse#alternate动画交替反向运行，反向运行时，动画一步步向后移动，同时带时间功能的函数也反向运行，例如ease-in变为ease-出时反转。计数取决于开始时是奇数还是偶数迭代animation-direction:alternate#alternate-reverse动画第一次反向运行，下一次正向运行，依次循环。决定奇数或偶数的计数从1开始。animation-direction:alternate-reverseanimation-direction:normal,reverseanimation-direction:alternate,reverse,normalanimation-fill-mode设置CSS动画在执行前后如何将样式应用于其目标。/*Singleanimation*/#none当动画没有执行时，动画不会对目标应用任何样式，而是已经分配给元素的CSS规则来显示元素。这是默认值。动画填充模式：无；#前向目标将保留执行过程中遇到的最后一个关键帧计算的值。animation-fill-mode:forwards;#backward动画在应用到目标时会立即应用第一个关键帧中定义的值，并在animation-delay期间保留这个值。animation-fill-mode:backwards;#bothanimation的规则将遵循“forwards”和“backwards”，从而在两个方向上扩展动画属性。animation-fill-mode:both;/*多个动画*/animation-fill-mode:none,backwards;animation-fill-mode:both,forwards,none;Forward:animation-directionanimation-iteration-countlastkeyframenormaleven/odd100%ortoreverseseven/odd0%orfromalternateeven0%orfromalternateodd100%ortoalternate-reverseven100%ortoalternate-reverseodd0%orfromBackwardanimation-directionfirst动画填充模式：两个，向前，无；向前：动画方向动画迭代计数最后一个关键帧正常偶数/奇数100%或toreverseeven/odd0%orfromalternateeven0%orfromalternateodd100%ortoalternate-reverseeven100%ortoalternate-reverseodd0%orfromBackwardanimation-directionfirstkeyframenormal或alternate0%或fromreverse或alternate-reverse100%或toanimation-通过查询确定动画是否正在运行。此外，它的值可以设置为暂停和恢复动画的重播。恢复暂停的动画将从暂停时开始播放动画，而不是从动画序列开始播放。运行：当前动画正在运行。paused：当前动画已暂停。@keyframe通过定义动画序列中关键帧（或路径点）的样式来控制CSS动画序列中的中间步骤。与transitions相比，keyframes关键帧可以控制动画序列的中间步骤。关键帧规则不指定动画的开始或结束状态（即0%/from和100%/to，浏览器将使用元素的现有样式作为开始/结束状态。如果在关键帧的样式中使用了不能用于动画的属性将被忽略，支持动画的属性仍然有效，不受影响。如果多个关键帧使用相同的名称，以最后定义的为准。在关键帧中出现!important将是忽略。@keyframes示例{from{margin-top:50px;}50%{margin-top:150px}到{margin-top:100px;}}
