☰

要素に複数の CSS トランジションを設定するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon animation css css-transitions
要素に複数の CSS トランジションを設定するにはどうすればよいでしょうか? 質問する

かなり単純な質問ですが、CSS トランジション プロパティに関する優れたドキュメントが見つかりません。CSS スニペットは次のとおりです。

    .nav a
{
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover
{
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

ご覧のとおり、トランジション プロパティは互いに上書きしています。現状では、テキスト シャドウはアニメーション化されますが、色はアニメーション化されません。両方を同時にアニメーション化するにはどうすればよいでしょうか? 回答をいただければ幸いです。

ベストアンサー1

トランジションをサポートするすべてのブラウザでは、トランジション プロパティはコンマで区切られます。

.nav a {
  transition: color .2s, text-shadow .2s;
}

easeはデフォルトのタイミング関数なので、指定する必要はありません。本当に必要な場合はlinear、指定する必要があります。

transition: color .2s linear, text-shadow .2s linear;

これは繰り返しが多くなり始めるので、複数のプロパティで同じ時間とタイミング関数を使用する場合は、transition-*ショートカットではなく、さまざまなプロパティを使用することをお勧めします。

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

おすすめ記事