Css一个接一个地过渡

Question

我试图让CSS transitions一个接一个地玩,意味着首先它必须改变宽度和后来的高度.
我尝试了几个选项,但一切都是徒劳的.我在这里实现了这一点javascript但是,一些CSS专业人士可以帮助探索这个并分解它.谢谢你提前.

<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-delay属性transition在一个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

您可以使用关键帧.

/* 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时,它们可用于反转动画.