css - 覆盖过渡属性

标签 css css-animations transitions

我想知道是否有任何方法可以仅覆盖我使用以下语句定义的转换属性:

transition: all 0.2s;

我想将 transition-property 重写为:

transition-property: width, height, opacity, font-size;

但是,当我在第一行之后添加第二行时,转换将不起作用。这是为什么?

我尝试这样做的原因是,如果我用 all 定义过渡,我的过渡将无法在 Safari 5.1 上运行,所以我想用单独的属性覆盖 all 属性,只是为了 webkit 支持。

最佳答案

你也可以只使用一个属性

div {
    transition: width 2s, height 2s, font-size 2s,opacity 2s;
    width: 200px;
    height: 200px;
    opacity: 1;
    font-size: 20px;
    background-color: red;
}

div:hover {
    width: 400px;
    height: 400px;
    opacity: 0.8;
    font-size: 40px;
        background-color: blue;
}
<div>Hello</div>

关于css - 覆盖过渡属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28466805/

相关文章:

css - 同时旋转多个元素

javascript - 具有 CSS 转换和转换结束事件的竞争条件 - 找不到解决方案

javascript - 如何设置从 Page1.html 到 Page2.html 的特定页面转换?

css - 触摸纯 CSS3 关闭子菜单

javascript - jquery 对话框位置不起作用

html - 将子导航居中对齐到父级

css - 一次显示 3 个边的 3d 立方体

css - 使用 CSS3 动画将元素旋转到 360 度

uml - UML 状态图中具有多个事件的一种转换

php - 链接有效时 wordpress 按钮不起作用