具有过渡属性的动画

CSS transition 属性对于简单动画很有用,它允许基于数字的 CSS 属性在状态之间进行动画处理。

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

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

查看结果

默认情况下,将鼠标悬停在具有 .Example 类的元素上会立即导致元素的高度跳转到 120px,其背景颜色变为红色(#ff0000)。

通过添加 transition 属性,我们可以导致这些更改随时间发生:

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

查看结果

all 值将转换应用于所有兼容(基于数字)属性。任何兼容的属性名称(例如 heighttop)都可以替换此关键字。

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

最后,值 ease 是动画功能,它决定动画的播放方式。ease 意味着开始慢,加速,然后再慢慢结束。其他值是 linearease-outease-in

跨浏览器兼容性

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

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

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