はじめに
どうやら、2023年内にはCSSで三角関数を主要なブラウザのすべてで使えるようになりそうです。CSSで使える三角関数は、sin()、cos()、tan()、asin()、acos()、atan()、atan2()です。SafariとFirefoxでは2022年に公開されてサポートされていて、3月にはChromeでもサポートされるそう。
三角関数はCSSのアニメーションや変形にとても便利な機能です。sin()関数を使うと、波のような動きを要素に付けられます。cos()関数を使うと、スプライン曲線のような動きを作れます。tan()関数は斜めに傾く動きをつけるのに適しています。asin()、acos()、atan()関数は、sin()、cos()、tan()の逆関数で、弧度を角度(度単位)に変換するのに使えます。atan2()関数は二つの値から角度を計算するのに使えます。
これらの三角関数がCSSで使えるようになることで、アニメーションと変形をより柔軟に制御できるようになって、視覚的に魅力的なウェブサイトやウェブアプリを設計できるようになります。ウェブデザインで表現できることがより広がることで、ウェブ全体がより芸術性を帯びていくでしょう。
サインカーブっぽい動き
サインカーブっぽい動きは、 translateX()関数を使って作成できます。次の例は、.animate要素を左右に動かすサインカーブのアニメーションです。
@keyframes sway {
0% { transform: translateX(0); }
50% { transform: translateX(30px); }
100% { transform: translateX(0); }
}
.animate {
animation: sway 2s infinite;
}コサインカーブっぽい動き
コサインカーブ っぽい動き は、 translateY()関数を使って作成できます。次の例は、.animate要素を上下に動かすコサインカーブのアニメーションです。
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(30px); }
100% { transform: translateY(0); }
}
.animate {
animation: bounce 2s infinite;
}まとめ
この記事では、CSSアニメーションで三角関数っぽい動きをするアニメーションを説明しました。三角関数はサインカーブやコサインカーブを作るのに使われ、CSSアニメーションに自然な動きをもたらします。今後、本格的に三角関数がサポートされるようになると、より複雑で美しいアニメーションを簡単に作ることができると思います。楽しみですね。
コメント