微信小程序开发之——动画-CSS动画(1)

• CSS动画示例

二 CSS动画基础预习

---

• CSS渐变动画：提供了一种在更改CSS属性时控制动画速度的方法

• CSS动画：使得可以将从一个CSS样式配置转换到另一个CSS样式配置

三 CSS动画过程动作监听

---

| 事件名 | 含义 |

| :-: | :-: |

| transitionend | CSS 渐变结束或 wx.createAnimation 结束一个阶段 |

| animationstart | CSS 动画开始 |

| animationiteration | CSS 动画结束一个阶段 |

| animationend | CSS 动画结束 |

四 CSS动画示例

---

4.1 布局文件(index.wxml)

<view class=“box { {extraClasses}}”

bindtransitiοnend=“transitionEnd”

bindanimationstart=“animationStart”

bindanimationiteration=“animationIteration”>

触发 CSS 渐变

触发 CSS 动画

说明：