css3 动画（一） transition

前言

最近在研究 css3 的动画属性 transition 和 animation，发现本身以前对这两个 css3 的动画属性并无太多深刻的理解。本篇将介绍 css3 的 transition 以及本身的一些理解。

transition

首先，transition 意为 “过渡，转场”，即从一种状态变为另一种状态的中间过程。css3 的 transition 属性，就是用来配置这个中间状态的。

css3 中的 transition 属性是 css3 过渡的四个属性的简写形式，其四个 css3 的属性分别为：

• transition-property：须要过渡的 css 属性，如 width
• transition-duration：过渡的时长，如 1s
• transition-timing-function：指定一个函数，该函数反应了属性值的变化快慢（速度）。能够是缓动函数的名称，也能够是 css3 中的贝塞尔曲线函数
• transition-delay：延迟开始过渡的时间，如 0.5s

例子：

<div>transition</div>

div {
  background: #fff;
  color: #000;
  transition: all 1s linear 0.5s;
}
div:hover {
  background: #000;
  color: #fff;
}

效果以下：
https://codepen.io/reai3041/p...

在代码中，能够看到，咱们须要预先使用 transition 属性，配置选择器样式的变化过程。这个过程包含了四个属性：须要有过渡效果的属性、过渡时间、过渡速度变化函数以及延迟多久开始过渡。

而后，配置完 transition 属性以后，在用户产生某个行为时（如鼠标 hover 到该元素上时），从新设置须要有过渡效果的属性的新值。

在上面的例子中：

• div 没 hover 时的状态（开始状态）为：背景颜色为白色，字体颜色为黑色。
• div 被 hover 时的状态（结束状态）为：背景颜色为黑色，字体颜色为白色。

假若不使用 css3 的 transition 过渡属性的话，则当 div 被 hover 时，div 的背景和字体样式会瞬间从没 hover 时的状态 变为 被 hover 时的状态，没有过渡的效果。

上面的例子中，使用了 transition 属性：

• 指定了 all，即 div 的全部能够变化的样式变化时都有过渡效果
• 指定了过渡时长为 1s
• 指定了过渡函数为 linear（线性），即变化速度为匀速
• 指定了延时为 0.5s，即 hover 0.5s 以后，才开始过渡

注意

只有当过渡状态过程当中，transition 属性存在（transition 被选择器应用时）时，才会有过渡的效果，不然没有过渡效果。

什么意思呢？

咱们能够看到上面的例子中：

• 鼠标移入 div 时，是有过渡效果的
• 鼠标移开 div 时，也是有过渡效果的

由于此时 transition 属性是设置在 div 选择器上的，无论移入和移出 div，transition 属性都在过渡的过程当中被 div 应用上了。

咱们改一下代码（将 transition 属性应用在 div 被 hover 时的选择器上）

div {
  background: #fff;
  color: #000;
  }
div:hover {
  background: #000;
  color: #fff;
  transition: all 1s linear 0.5s;
}

效果以下：
https://codepen.io/reai3041/p...

此时能够看到：

• 鼠标移入 div 时，有过渡效果
• 鼠标移出 div 时，没有过渡效果

移入时，transition 在 div:hover 选择器上将 transition 属性应用在了 div 上，即在过渡的过程当中，div 是有 transition 属性应用的

移出时，div 上没有了 transition 属性，此时便没有了过渡效果，而是瞬间效果。

总结

1. 其实 transition 很简单，就四个属性：

• 有过渡效果的属性
• 过渡时长
• 过渡函数（下一篇讲）
• 过渡时延

2. 注意只有当选择器在过渡的过程当中，被应用了 transition 属性，才会有过渡效果，不然是没有过渡效果的，只有瞬间效果

下一篇：css3 动画（二）贝塞尔曲线以及利用 transition 和 贝塞尔曲线函数写出一个加入购物车的动态效果（平抛运动效果）