解放区在住氷翠 緑の閃光
【解放区在住氷翠 緑の閃光】HTML

【CSS】CSSで簡単なアニメーションを作ってみよう

2022-10-02 20:29

こんばんは、氷翠です。

今回はCSSを使った、簡単なアニメーションを使う方法です。

transition-duration: 1s;

こんなプロパティ一つでアニメーションができちゃいます。後ろについている「1s」というのは「1秒」の意味です。つまり、1秒かけてアニメーションしていくということになります。

あと、この動画にはもう一つ特殊なプロパティを使っている。

text-transform: uppercase;

ボタンタグに対して文字に装飾するプロパティで、文字を大文字にするプロパティになります。値によっては小文字に変化させたり、最初の文字だけ大文字にしたり。

こんな二つのプロパティを使っていますが、いろいろと利用できそう。

もちろん今回の「button」タグに使えるかと。