具有过渡属性的动画

CSS transition 属性对于简单动画很有用，它允许基于数字的 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。

跨浏览器兼容性

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

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

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