动画

目标 Objective

• Lorem ipsum dolor sit amet.
• Perspiciatis, dolores numquam. Voluptas, earum.
• Repellendus quae quasi obcaecati blanditiis!
• Atque iste amet voluptatibus numquam!
• Laborum sed tempore voluptatum adipisci!

内容 Content

1. Lorem ipsum dolor sit.
2. Aperiam beatae odit consectetur?
3. Consectetur amet repellat error?
4. Cum, delectus deserunt? Magni.
5. Atque illum reiciendis ut.

回顾 Review

• Lorem ipsum dolor sit amet.
• Quibusdam veritatis repellat magni possimus.
• Consectetur non impedit eos rerum.
• Ratione ea nihil blanditiis vitae?
• Quibusdam, dolorum aliquam. Facere, sequi.

引言 Introduction

过渡动画 Transition

• 元素从一个状态过渡到另外一个状态 - define the transition between two states of an element，包括过渡的2个状态、过渡的时间、过渡的方式、是否延迟等属性
• 状态过渡需要一个触发条件，通常是鼠标悬停 hover；也可以通过添加/移除类的方式实现
• 只能定义2个状态：开始状态、结束状态；如果需要多个状态呈现变化过程，请使用帧动画 animation
• 只适用于 数值 属性状态的变换；如 display:none; 和 display:block; 之间无法实现过渡
• 只能作用于当前元素的状态变换；如果多个元素使用，请使用帧动画
• 可以是一个属性的状态变换，也可以是多个属性的状态变换，如宽度和颜色都变换；多个属性使用 逗号, 分隔 - separated by commas
• 桌面端使用较多；移动端使用少

动画使用 Usage

• 复合属性 shorthand

  transition: property duration timing-function delay;

• 单独属性 longhand

  transition-property:
  transition-duration:
  transition-timing-function:
  transition-delay:

步进动画 Steps()

• 由时间函数 steps() 指定的一种特殊的分段过渡效果
• number_of_steps：数字，过渡分几个阶段完成
• direction：start 和 end，默认是 end，指每个阶段过渡结束后才渲染；start 则是过渡开始前就渲染

steps(number_of_steps，direction)

帧动画 Animation

动画状态 State

• 初始状态/initial：元素应用动画前的状态
• 开始状态/start state/第一个关键帧状态：如果不指定0%或from，则元素初始状态就是开始状态/第一个关键帧状态
• 结束状态/end state/最后一个关键帧状态：如果不指定100%或to，则元素初始状态就是结束状态/最后一个关键帧状态
• 动画结束后，默认回到初始状态

动画定义 @keyframes

• 利用关键字 from 和 to；通常省略 from，表示从初始状态开始；关键字只能定义2个状态

  @keyframes ani_name {
      from {
        /* 开始状态/第一个关键帧 */
      }
  
      to {
        /* 结束状态/最后一个关键帧 */
      }
  }

• 使用百分比：可以定义多个百分比节点/状态，动画效果更为灵活细腻

  @keyframes ani_name {
      0% {  
        /* 开始状态/第一个关键帧 */    
      }
  
      50% {    
        /* 中间状态/中间关键帧 */  
      }
  
      100% {  
        /* 结束状态/最后一个关键帧 */    
      }
  }

动画使用 Usage

• 复合属性语法

animation: name duration timing-function delay iteration-count direction fill-mode;

• 单独属性语法

animation-name:
animation-duration:
animation-timing-function:
animation-delay:
animation-iteration-count:
animation-direction:
animation-fill-mode:

步进动画 Steps()

• .动画方式还可以按照指定的阶段数 steps 逐步完成
• .由时间函数 steps() 指定分段过渡效果
• .同过渡动画 transition
• number_of_steps：数字，过渡分几个阶段完成
• direction：start 和 end，默认是 end，指每个阶段过渡结束后才渲染；start 则是过渡开始前就渲染

steps(number_of_steps，direction)

时间轴动画 Timeline

• 元素的动画效果由容器的滚动或视口触发
• 不用设置时长 duration，而是取决于用户滚动的速度
• 通常指定 animation-fill-mode 为 both

1. view(start,end)
   • 元素在屏幕/视口可见时才触发 - animation happens only when the element is visible on the screen
   • 元素进入视口，动画开始播放
   • 元素到达视口顶部，动画结束播放
   • start: Inward offset from beginning of the scrollport. default 0
   • end: Inward offset from end of the scrollport. default 0
   • 通常取值 view(50% 10%)

   

2. scroll()

初始化 Initialization

练习 Drill

小结 Summary

作业 Homework

参考 Reference

1. 过渡动画 transition
2. 帧动画 animation
3. animation-timeline
4. animation-range
5. view()
6. Scroll Reveal
7. GASP