如何使所有元素都具有过渡效果

Question

我希望所有CSS更改都有转换。我试过了

* { transition: all 1s; }

但它不起作用。

证明：http://jsfiddle.net/Lv3kpyxh/

我错过了什么？

Answer 1

您的媒体查询规则格式错误。试试这个：

* {
    transition: all 1s;
}
@media only screen and (min-width: 600px) {
    .special {
        padding: 30px;
        border: 1px solid black;
        text-align: center;
    }
}
@media only screen and (max-width: 600px) {
    .special {
        padding: 0;
        border: 0;
        text-align: left;
    }
}

padding值已设置动画，但如果您希望边框也设置为动画，则最好将第二个border规则更改为border: 1px solid transparent;。

Updated fiddle here