2024/07/02 (更新日:2024/07/11)

【CSS】「transition-duration」プロパティの使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「transition-duration」プロパティの使い方について解説します！丁寧にまとめていくので、興味がある方はぜひご一読ください。

「transition-duration」を使うとアニメーションを付けることができるのですが、これが最も簡単に動きを付ける方法だと思います。CSSのみでも動きがつけられるからです。

この記事の内容！

また、下の動画でも「transition-duration」プロパティの使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「transition-duration」を使うと何ができるのか？

<div class="box"></div>

.box {
    width: 300px;
    height: 300px;
    background-color: skyblue;
    transition: 1s;
}

.box:hover {
    background-color: pink;
}

「transition-duration」を使うと、指定した要素の特定のプロパティの値が、新しい別の値に「遷移するまでにかかる時間」の指定ができます。

例えば「:hover」などの擬似クラスを使うと、指定してあるプロパティの値を「別の値」に上書きすることができますよね。

その際に「どれくらい時間をかけて」「移り変わるのか」の指定ができる、というものです！

「transition-duration」に指定できる値は下記があります！

これらがあります。

.box {
    width: 300px;
    height: 300px;
    background-color: skyblue;
    transition: 1s;
}

「s」という単位は「seconds」（秒）の略で、「秒」を表します。

上のように、「1s」と指定すると、「1秒」という指定になります。

なので遷移にかかる時間は「1秒」になります。

.box {
    transition: 1s;
    transition: 1000ms;
}

「ms」という単位は「milliseconds」（ミリ秒）の略で、「ミリ秒」を表します。

「1s」＝「1000ms」　です。

なので、上のコードの２行は同じく「1秒」を表します。

.box {
    transition: 0.6s;
    transition: .6s;
}

この２行はどちらも「0.6秒」を表します。

少数の指定の際は、整数部分の「0」を省略して、より簡潔に書くことが可能です！

「transition-duration」を使うと、指定した要素の特定のプロパティの値が、新しい別の値に「遷移するまでにかかる時間」の指定ができる。

「transition-duration」に指定できる値は下記がある。

「s」という単位は「seconds」（秒）の略で、「秒」を表す。

「ms」という単位は「milliseconds」（ミリ秒）の略で、「ミリ秒」を表す。

「transition-duration」の初期値は「0s」です。

少数での指定の際は、整数部分の「0」を省略できる。

こんな感じですかね！

この記事が気に入った方は僕のTwitter（@chibasyuta）のチェックもお願いします！

それではこんな感じでこの記事を終わります！

ではまた！