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

您可以使用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时，它们可用于反转动画。

Answer 3

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

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

<div></div>

Css一个接一个地过渡

3 个答案: