CSS3-过渡动画

CSS3 中的 transition 属性用于实现元素从一种样式变换为另一种样式时为元素添加过渡效果。

transition 属性是一个综合属性，可以简写也可以单独设置某个单一的属性。

综合设置语法：

transition: property duration timing-function delay;

• property 需要过渡的样式属性（必要）；值为 all 则表示所有样式属性
• duration 过渡持续的时间（必要）；单位可以是 秒(s) 或 毫秒(ms)
• timing-function 过渡时的速度
  • 常见的值有 linear(线性过渡，匀速)、ease(由慢到快再到慢)、ease-in(由慢到快)、ease-out(由快到慢)、ease-in-out(由慢到快再到慢)
• delay 延迟过渡的时间；指定多少秒或毫秒后开始过渡

示例：

CSS:

div {
   
  width: 100px;
  height: 50px;
  background-color: #f00;