Coding-everyday

# 1. 区分animation（动画）、transition（过渡）、transform（变形）、translate（移动）

  • CSS3中的transform(变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix；

  • transform(变形)是CSS3中的元素的属性，而translate只是transform的一个属性值；transform是transition（过渡动画）的transition-property的一个属性值。

  • animation（动画）、transition（过渡）是css3中的两种动画属性。animation强调流程与控制，对元素的一个或多个属性的变化进行控制，可以有多个关键帧（animation 和@ keyframes结合使用）；

  • transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（例如hover）时才能获取样式，这样就会产生过渡动画。可以认为它有两个关键帧（transition ＋ transform ＝ 两个关键帧的animation）。

  • animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值；并且transition为2帧，从from .... to，而animation可以一帧一帧的。

# 1.1. transition属性

1、语法 transition是一个复合属性，可设置四个过渡属性，简写方式如下：

transition{transition-property, transition-duration, transition-timing-function, transition-delay}
  • transition-property：是用来指定当元素其中一个属性改变时执行transition效果，值有none（没有属性改变）、all（默认值，所有属性改变），indent（某个属性名，一条transition规则，只能定义一个属性的变化，不能涉及多个属性，如果要设置多个属性时，需分别设置，中间以逗号隔开）【当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果】。
  • transition-duration：过渡时间，是用来指定元素转换过程的持续时间，单位为s（秒）或ms（毫秒）
  • transition-timing-function：时间函数，允许你根据时间的推进去改变属性值的变换速率，值ease（逐渐变慢）、linear（匀速）、ease-in(加速)、ease-out（减速）、ease-in-out（加速然后减速）、cubic-bezier（该值允许你去自定义一个时间曲线）
  • transition-delay：延迟，指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，单位为s（秒）或ms（毫秒）

2、触发方式

  • 伪类触发：:hover :focus :checked :active
  • js触发：toggleClass

3、以下情况下，属性值改变不能产生过渡效果

background-image，如`url(a.jpg)`到`url(b.jpg)`（与浏览器支持相关，有的浏览器不支持）等
float 浮动元素
height 或 width 使用 auto 值
display 属性在 none 和其他值（block、inline-block、inline）之间变换
position 在 static 和 absolute 之间变换

# 1.2. animation属性

语法 设置好了关键帧，就可以设置animation属性了，animation也是一个复合属性，可以简写，语法如下：

animation{animation-name, animation-duration, animatino-timing-function, animation-delay, animation-iteration-count, animation-direction, animtion-play-state, animation-fill-mode}

  • animation-name：用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致

  • animation-duration：指定元素播放动画所持续的时间

  • animatino-timing-function： 和transition中的transition-timing-function中的值一样。根据上面@keframes中分析的animation中可能存在多个小动画，因此这里的值设置是针对每一个小动画所在时间范围内的属性变换速率。

  • animation-delay：定义在浏览器开始执行动画之前等待的时间，这里是指整个animation执行之前的等待时间，而不是上面说的多个小动画

  • animation-iteration-count：定义动画的播放次数，其通常为整数，默认是1；取值为infinite，动画将无限次的播放。

  • animation-direction：主要用来设置动画播放方向，其主要有两个值

    • normal 默认值，如果设置为normal时，动画每次循环都是向前（即按顺序）播
    • alternate（轮流），动画播放在第偶数次向前播放，第奇数次向反方向播放（animation-iteration-count取值大于1时设置有效）

  • animtion-play-state：属性是用来控制元素动画的播放状态。其主要有两个值：

    • running，可以通过该值将暂停的动画重新播放，这里的重新播放不是从元素动画的开始播放，而是从暂停的那个位置开始播放。
    • paused，暂停播放 注意：使用animtion-play-state属性，当元素动画结束后，元素的样式将回到最原始设置状态（这也是为什么要引入animation-fill-mode属性的原因）

  • animation-fill-mode：默认情况下，动画结束后，元素的样式将回到起始状态，animation-fill-mode属性可以控制动画结束后元素的样式。主要具有四个属性值：

    • none（默认，回到动画没开始时的状态。）
    • forwards（动画结束后动画停留在结束状态）
    • backwords（动画回到第一帧的状态）
    • both（根据animation-direction轮流应用forwards和backwards规则）。

# 2. animation中的steps()逐帧动画

语法：steps(n, start/end)

steps 函数指定了一个阶跃函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

  • 第一个参数 number 为指定的间隔数，即把动画分为n步阶段性展示
  • 第二个参数默认是end，设置最后一步的状态
    • start 第一帧是第一步动画结束
    • end 第一帧是第一步动画开始

举例：

  • steps(1,start) 动画分成1步，动画执行时为开始左侧端点的部分开始。
  • steps(1,end) 动画分成1步，动画执行时以结尾端点为开始，默认值end

# 3. 关于js动画和CSS3动画的差异性

渲染线程分为main thread和compositor thread，如果css动画只改变transform和opacity，这时整个CSS动画得以在compositor trhead完成（而js动画则会在main thread执行，然后触发compositor thread进行下一步操作），特别注意的是如果改变transform和opacity是不会layout或者paint的。 区别：

  1. 功能涵盖面，js比CSS3大
  2. 实现/重构难度不一，CSS3比js更加简单，性能调优方向固定
  3. 对帧速表现不好的低版本浏览器，CSS3可以做到自然降级
  4. CSS3动画有天然事件支持
  5. CSS3有兼容性问题

← 响应式开发 →