CSS3过渡

1.简介

• CSS3动画效果包括三个部分：变形（transform）、过渡（transition）、动画（animation）
• 我们可以使用transition属性将元素的某一个属性从“一个属性值”在指定的时间内平滑过渡到“另一个属性值”，从而实现动画效果（重点理解）
• 区别于transform：
  • transform只是展现了一个结果，而transition展现了一个“过程”，重点在于“过程”的呈现
• 凡是涉及到CSS3过渡的，都要结合 :hover 伪类来实现过渡效果（重点注意）

2.过渡：transition

• 语法：
  • transition：过渡属性 过渡时间 过渡方式 延迟时间

tansition-property(过度属性)	对元素的哪一个属性（例如：背景颜色、width、height等）进行操作
transition-duration(过渡时间)	过渡的持续时间
transition-timing-function(过渡方式)	过渡的速率变化方式
transition-delay(延迟时间)	过渡的延迟时间（可选参数）

• 过渡方式（transition-timing-function有5种取值）
  • ease ：默认值，由快到慢，逐渐变慢
  • linear ：匀速
  • ease-in ：速度越来越快（即渐显效果）
  • ease-out ：速度越来越慢（即渐隐效果）
  • ease-in-out ： 先加速后减速（即渐显渐隐效果）

3.深入了解transition属性

• transition-property取值为all
  • 当取值为all时，意味着，我们可以对多个属性进行过渡实现，多个属性之间用逗号隔开
• transition-delay的省略
  • 当该属性值省略时，意味着，我们的延迟时间为零秒
• （重点理解）transition属性的位置设置不同时（分为普通状态和:hover状态）
  • 将该属性放在普通状态下时，我们将鼠标移动到元素上时，有过渡效果，移出时也有过渡效果
  • 将该属性放在:hover状态下时，我们将鼠标移动到元素上时，有过渡效果，移出时没有过渡效果