CSSでアニメーションの設定
2024年5月8日
もう5月になり日にちが経っていくこのころ…
気温も徐々に上がってきてるころ、こっちは早く夏が来てほしい気分でいます！
話変わりますが…
CSSでアニメーションの設定
javascriptを使わず、CSSだけアニメーションを設定方法を説明しますね。
こっちはたまに使用していますが…
ここは忘備録として書き込みします。
※ここから記述するときは中略させておきます。
<p>アニメーション</p>次に、CSS
p {
animation:slider 1s;
color: #333;
text-align: center;
}ここまでの記述方法はお分かりですよね。
でもここまで表示をしても何も変化なしですよね。
さてと、アニメーションを動かすために、必要な『@keyframes』というプロパティが必要になります。
@keyframes slider {
0% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}これで、テキストのスライダーが表示されました。
CSSをまとめるとこのようになります。
p {
animation:slider 1s;
color: #333;
text-align: center;
}
@keyframes slider {
0% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}
『@keyframes』の使い方について説明しますね。
@keyframes キーフレーム名 {
/* 開始値 */
0% {
プロパティ: 値;
}
/* 終了値 */
100% {
プロパティ: 値;
}
}プロパティについては、公式サイトのMDNに記載しています。
こっちも忘れるときがあるので、忘備録としてφ(..)メモメモ…
では、また！
- Leonardo
- 無事に関空到着！ 2024年10月5日
- 大きな飛行機の揺れ… 2024年10月4日
- そろそろ搭乗準備へ！ 2024年10月3日
- レンタカー返却から石垣空港へ！ 2024年10月2日
- ユーグレナモールで散策… 2024年10月1日