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

2022-10-02

こんばんは、氷翠です。

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

transition-duration: 1s;

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

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

text-transform: uppercase;

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

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

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