1. transition

(1)使用

// 简写
transition: height 1s 1s ease;

// 具体属性
transition-property: height;        // 指定需要动画的属性
transition-duration: 1s;            // 动画执行时间
transition-delay: 1s;               // 动画延迟执行时间
transition-timing-function: ease;   // 动画运动曲线

(2)使用注意

  • 目前,各大浏览器(包括IE 10)都已经支持无前缀的transition,所以transition已经可以很安全地不加浏览器前缀。
  • 不是所有的CSS属性都支持transition,完整的列表查看这里,以及具体的效果
  • transition需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态。比如,height从0px变化到100px,transition可以算出中间状态。但是,transition没法算出0px到auto的中间状态,也就是说,如果开始或结束的设置是height: auto,那么就不会产生动画效果。类似的情况还有,display: none到block,background: url(foo.jpg)到url(bar.jpg)等等。

(3)局限

  • transition需要事件触发,所以没法在网页加载时自动发生。
  • transition是一次性的,不能重复发生,除非一再触发。
  • transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
  • 一条transition规则,只能定义一个属性的变化,不能涉及多个属性。

2. animation

(1) 使用

// 简写
div:hover {
  animation: rainbow 1s 1s 3 linear forwards normal;
}

// 具体属性
div:hover {
  animation-name: rainbow;              // 动画关键字
  animation-duration: 1s;               // 动画执行时间
  animation-delay: 1s;                  // 动画延迟执行时间
  animation-iteration-count: 3;         // 动画执行次数,infinite:无限循环
  animation-timing-function: linear;    // 动画运动曲线
  animation-fill-mode: forwards;
  // 动画结束以后,会立即从结束状态跳回到起始状态。
  // forwards: 让动画停留在结束状态。
  // none:默认值,回到动画没开始时的状态。
  // backwards:让动画回到第一帧的状态。
  // both: 根据animation-direction(见后)轮流应用forwards和backwards规则。
  animation-direction: normal;
  // 动画执行的顺序
  // normal:按照关键字顺序正常执行
  // alternate:不常用,兼容性不好
  // reverse: 按照关键字顺序逆序执行
  // alternate-reverse:不常用,兼容性不好
}

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

3. 兼容各个浏览器

—前缀— —浏览器—
-webkit- chrome、safari
-moz- firefox
-ms- IE
-o- opera

参考资料

分类: 前端

发表评论

电子邮件地址不会被公开。 必填项已用*标注