Css 一个接一个过渡

Question

我试着让 CSS transitions 一个接一个播放，意味着首先它必须变换宽度，然后变换高度。
我尝试了几个选项，但一切都在 vain.I 中实现了 javascript 但是一些 CSS 专业人士可以帮助探索这个并提前打破它 up.Thanks。

<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s;
    transition: all 2s;
}

div:hover {
    width: 300px;
    height:500px;
}
</style>

Answer 1

只需使用 transition shorthand 中的 transition-delay 属性即可在一个 CSS 规则中按顺序执行多个转换。

-webkit-transition: width 2s, height 2s ease 2s;
transition: width 2s, height 2s ease 2s;

Answer 2

将各个过渡属性分解为以逗号分隔的值以便于参考....然后只需使用过渡延迟对它们进行排序。

div {
    width: 100px;
    height: 100px;
    background: red;
    transition-property: width, height;
    transition-duration:2s, 4s;
    transition-delay:0s, 2s;
    transition-timing-function:linear;
}

div:hover {
    width: 300px;
    height: 300px;
 }

<div></div>

Answer 3

您可以为此使用 Keyframes。

/* Standard */
@keyframes all {
    0%   {width: 100px; height: 100px;}
    50%  {width: 300px; height: 100px;}
    100% {width: 300px; height: 500px;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes all {
    0%   {width: 100px; height: 100px;}
    50%  {width: 300px; height: 100px;}
    100% {width: 300px; height: 500px;}
}

这样称呼它：

div:hover {
    -webkit-animation: all 2s; /* Chrome, Safari, Opera */ 
    animation: all 2s;
    animation-fill-mode: forwards;
}

看这个例子JsFiddle

编辑：我之前发布的其他答案使用了比这更好的方法，因为它们可用于在用户滚动 div 时反转动画。

Css 一个接一个过渡

Css Transitions one after another

css

transitions

css-transitions