web-dev-qa-db-ja.com

Cssは次々に遷移します

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>
csscss-transitionstransitions
9
Ankanna

transition省略形のtransition-delayプロパティを使用するだけで、1つのCSSルールで複数の遷移を順番に実行できます。

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

これには 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をロールオーバーしたときにアニメーションを反転するために使用できるため、これよりも優れた方法を使用しています。

5
MichaelK

参照しやすいように、個々の遷移プロパティをコンマ区切りの値に分割します。次に、遷移遅延を使用してそれらをシーケンスします。

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>
3
Paulie_D