こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。
今回はCSSアニメーションの基本となる@keyframesについて解説します。アニメーションを活用すると、Webサイトのデザインがより動きのある魅力的なものになります。
目次
@keyframesとは？
@keyframesは、CSSでアニメーションの動きを定義するためのルールです。時間経過によるスタイルの変化を指定でき、要素をスムーズに動かすことができます。
@keyframesのメリット
- JavaScriptを使わず、CSSだけでアニメーションを作成可能
animationプロパティと組み合わせて適用- 背景色変更、フェードイン・アウト、回転、バウンドなど様々な表現ができる
@keyframes 基本的な書き方
基本的な書き方は以下のとおりです。
@keyframes アニメーション名 {
0% {
/* 開始時のスタイル */
}
100% {
/* 終了時のスタイル */
}
}背景色を変化させる
@keyframes changeColor {
0% {
background-color: red;
}
100% {
background-color: blue;
}
}このアニメーションを適用するには、animationプロパティを使用します。
div {
width: 100px;
height: 100px;
background-color: red;
animation: changeColor 2s ease-in-out infinite;
}このコードを適用すると、divの背景色が2秒ごとに赤から青へと変化し続けます。
@keyframesを活用したアニメーションの種類
1. フェードイン・フェードアウト
要素の透明度を変更して、徐々に表示・非表示させるアニメーションです。
@keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
div {
animation: fadeInOut 3s ease-in-out infinite;
}2. 回転アニメーション
要素が360度回転するアニメーションです。
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
div {
animation: rotate 5s linear infinite;
}3. バウンドアニメーション
要素が上下にバウンドする動きを作れます。
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
div {
animation: bounce 1s ease-in-out infinite;
}まとめ
@keyframesを使うと、要素の動きを自由にカスタマイズできるので、Webデザインの幅が広がります。
ぜひ実際にコードを書いて試してみてください！
今後もCSSのテクニックを紹介していくので、お楽しみに😊
ではまた〜👋
コメント