css3 animation学习心得

先说一下与transition的区别，因为他们真的有点点相似。

• animation动画可以通过@keyframes属性对动画进行更为精细的控制，设置多个状态。

  但是transition属性则只有两个状态，起始状态与结束状态。

• 两个属性的触发时机有很大的不同，animation好比是一个自执行函数，只要定义好，立马生效触发动画。

  transition则像是一个事件处理函数（事件监听器），只有它监听的属性值发生改变，动画效果才会生效。

我认为，选择使用时机恰恰就是看他们的名字。如果想过渡就transition，如果想动画就animation

针对每个属性的解释

• animation-name
• animation-duration: animation中第一个time被解析为duration, 第二个是delay
• animation-timing-function
• animation-delay: -1s;定义为负数会直接从动画开始多少秒后开始
• animation-iteration-count： 定义为小数，比如1.5会在播放到第二次一半的时候突然结束
• anitmatation-direction: 四种，normal reverse alternate(交替，看次数，如果只有一次自然就不会交替了） alternate-reverse
• animation-fill-mode 设置CSS动画在执行之前和之后如何将样式应用于其目标。

  

  

  总的来说就是：forwards是执行到最后的关键帧。 准确来说其实是动画在哪停就永远保持在哪

  backwards与none的区别在于： animation-delay期间，因为两者真正开始都时候都是要突变到第一个关键帧中定义的值，这个第一个关键帧受direction的影响，如果是reverse则是100%的时候

• animation-play-state

  用法：

const elem = document.getElementById('elem');
setTimeout(() => {elem.style.animationPlayState = 'paused'}, 2000);
setTimeout(() => {elem.style.animationPlayState = 'running'}, 4000);
           

就是可以控制是否暂停和继续。

接下来详细说一下animation-timing-function

这个和transition的timing-function差不多。

主要说一下ease-out, ease-in, ease-in-out,ease(default value)

横轴时间，纵轴进度

总结就是：

ease out尾缓动

ease in首缓动，

ease-in-out是ease-in和ease-out的结合。首尾缓动。

ease尾缓动，与ease out有点相似，不过ease一开始速度要比ease-out快很多

大部分时候直接用默认的ease就行了。

还有几种：

linear：字面意思，线性的，全程一个速率

cubic-bezier(0.1, 0.7, 1.0, 0.1);

三次贝塞尔曲线。一共四个参数，代表了第二个横纵坐标和第三个点的横纵坐标（一共四个点，第一个在(0,0),最后一个在(1,1) ）

前面的ease之类的都是可以通过cubic-bezier设置特定的参数来实现的。

steps(number, position)：number就是说平均分成几段，

position取值有：

start，end，jump-start，jump-end，jump-none，jump-both。

jump-start就是以前的start，jump-end就是以前的end。这个jump理解为跳过。

直接看横线的位置就行了，因为单独一个点，在数学上有意义，而不会反映到屏幕上。比如jump-start，就会跳过开头，你永远看不到在0的位置

个人觉得用来做时钟动画是很经典的，因为秒针是一秒跳一格，而不是像ease类函数那样连续地划过去。

• jump-start｜start代表秒针刚进入动画，就跳了一格。
• jump-end｜end代表秒针等了一秒才开始跳。
• jump-none：适用场景为0和1都得持续一段时间的，比如说完全透明和完全不透明。jump-start和jump-end就没办法做到。
• jump-both首尾都是没有的。目前没感觉这个both有啥适用场景

这里录了一个gif（虚线框代表进度中to也就是100%的位置，没有去仔细考虑border占的width，所以可能不能完全重合，知道是100%就行）

对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。

若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数，

!!!如果定义了0-50%-100%，会有两段ease，也就是从快到慢，从快到慢。如果是step。例如本来设置的0-100%秒针一共跳60次，于是你设置了steps(60, jump-start)，但是如果是0-50%-100%，他每一段都跳60次，那就成了120次。

@keyframe里的百分比是支持重写timing function的

animation的@keyframe定义的是时间的百分比，举例就是绝对定位的left从0变到100px。持续两秒

现在@keyframes {

…

50% {left: 30px;}

}

这个50%就是在1s的时候

至于

CSS animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个<timing-function>

说的是一个timing-function对应一个animation-name，

像这样

只做理解，个人感觉实际意义不大。