29、CSS3 过渡

通过 CSS3 的 transition，我们可以在当元素从一种样式变换为另一种样式时为元素添加效果。

过渡属性：

  • transition 简写属性，用于在一个属性中设置四个过渡属性。
  • transition-property 规定应用过渡的 CSS 属性的名称。
  • transition-duration 定义过渡效果花费的时间。默认是 0。
  • transition-delay 规定过渡效果何时开始。默认是 0。
  • transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。

其中 transition-timing-function 属性

  • linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
  • ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
  • ease-in 规定以慢速开始的过渡效果（等于 cubicbezier(0.42,0,1,1)）。
  • ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
  • ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
  • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

例：

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: background 3s linear, width 2s linear, height 2s linear;
}
div:hover{
  width: 300px;
  height: 200px;
  background: #ff0;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

鼠标覆盖初始化好的红方块上，就会执行以下的过渡动画效果（上传不了视频只能截图了）：
图片说明 ->图片说明 ->图片说明 ->图片说明

例：如果css换成以下样式，鼠标覆盖这个红方块，红方块就会转动180度哦~
div {
width: 100px;
height: 100px;
background: red;
transition: transform 2s;
}
div:hover{
transform: rotate(180deg);
}