CSS动画：transition 的用法介绍

CSS中最简单的动画叫做 transition(转变)。通常，当一个元素的样式属性值发生变化时，我们会立即看到页面元素发生变化，也就是页面元素从旧的属性值立即变成新的属性值的效果。Transition(转变)能让页面元素不是立即的、而是慢慢的从一种状态变成另外一种状态，从而表现出一种动画过程。

这些转变效果可以用下列属性来指定：

transition-property – 什么属性将用动画表现，例如, opacity。

transition-duration – 转变过程持续时间。

transition-timing-function – 转变时使用的调速函数(比如, linear、 ease-in 或自定义的 cubic bezier 函数)。

transition – 三种属性的合体简写。

下面是一个例子：

div {
  opacity: 1;
  transition: opacity 1s linear;
}

div:hover {
  opacity: 0;
}

当你用鼠标放在这个方块上时，这个方块会表现淡入淡出式的缓慢消失效果，是一