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
- 転職したほうがいい？～Part.2～ 2024年12月19日
- 転職したほうがいい？ 2024年12月18日
- オリジナルリセットスタイル構築中 2024年12月17日
- 今日は家族のクリスマスプレゼント～Part.3～ 2024年12月16日
- 今日は家族のクリスマスプレゼント～Part.2～ 2024年12月15日