CSS3过渡和动画

1.transition过渡

• 1.指定元素transition: 1s height, 1s width;
• 2.延迟

transition: 1s height, 1s 1s width;
// 上面代码指定，width在1秒之后再开始变化，也就是延迟（delay）1秒

• 3.状态变化速度
• ease：慢-快-慢（默认）
• linear：匀速
• ease-in：加速
• ease-out：减速
• cubic-bezier函数：自定义速度模式演示

语法

// 完整写法
transition: 1s 1s height linear;
// 常用写法
transition: 1s;

注意transition一般加在原始元素上，不要加在hover，active等状态上，不然只针对某种状态。

2.animation动画

定义动画

• 0%可以用from代表，100%可以用to代表

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}
// 相当于
@keyframes rainbow {
  from { background: #c00 }
  50% { background: orange }
  to { background: yellowgreen }
}

• 如果省略某个状态，浏览器会自动推算中间状态

@keyframes rainbow {
  50% { background: orange }
  to { background: yellowgreen }
}

@keyframes rainbow {
  to { background: yellowgreen }
}

• 可以把多个状态写在一行

@keyframes pound {
  from，to { transform: none; }
  50% { transform: scale(1.2); }
}

动画参数

• animation-fill-mode 动画结束时的状态
• none：默认值，回到动画没开始时的状态
• forwards：让动画停留在结束状态
• backwards：让动画回到第一帧的状态
• both: 根据animation-direction（见后）轮流应用forwards和backwards规则
• animation-direction动画循环的方式
• normal默认值
• alternate
• reverse

• alternate-reverse
  具体参照下图

  
  
  

  animation-direction.png
  
  

  常用的值是normal和reverse。浏览器对其他值的支持情况不佳，应该慎用。

动画语法

div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}
// 相当于
div:hover {
  animation-name: rainbow;
// 动画名称
  animation-duration: 1s;
// 持续时间
  animation-timing-function: linear;
// 动画状态
  animation-delay: 1s;
// 动画延迟
  animation-fill-mode:forwards;
// 动画结束状态
  animation-direction: normal;
// 动画循环方式
  animation-iteration-count: 3;
// 动画循环次数，设为infinite则为无限循环
}

steps函数

用于实现逐帧动画

div:hover {
 animation: 10s rainbow infinite steps(10,start);
}
动画将被分成10帧来播放，而不是平滑过渡。第二个参数默认为end，可设置为start。

效果参照

动画暂停

animation-play-state

div {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
}

div:hover {
  animation-play-state: running;
}