CSS 具有transition属性的动画

示例

CSStransition属性可用于简单的动画，它允许基于数字的CSS属性在状态之间进行动画处理。

示例

.Example{
    height: 100px;
    background: #fff;
}

.Example:hover{
    height: 120px;
    background: #ff0000;
}

查看结果

默认情况下，将鼠标悬停在带有.Example该类的元素上会立即导致该元素的高度跳至120px其背景颜色为红色（#ff0000）。

通过添加transition属性，我们可以使这些更改随时间发生：

.Example{
    ...
    transition: all 400ms ease;
}

查看结果

该all值将过渡应用于所有兼容（基于数字）的属性。任何兼容的属性名称（例如height或top）都可以代替此关键字。

400ms指定过渡所花费的时间。在这种情况下，元素的高度变化将需要400毫秒才能完成。

最后，该值ease是动画函数，该函数确定如何播放动画。ease表示开始缓慢，加快速度，然后再次结束缓慢。其他值是linear，ease-out和ease-in。

跨浏览器兼容性

transition除IE 9之外，所有主要浏览器通常都很好地支持该属性。对于早期版本的Firefox和基于Webkit的浏览器，请使用供应商前缀，如下所示：

.Example{
    transition:         all 400ms ease;
    -moz-transition:    all 400ms ease;
    -webkit-transition: all 400ms ease;
}

注意：该transition属性可以为任意两个数值之间的变化设置动画，而与单位无关。它也可以单元，例如间过渡100px到50vh。但是，它不能在数字和默认值或自动值之间转换，例如将元素的高度从转换100px为auto。