CSSのanimation-directionプロパティでアニメーションの再生方向を設定する方法
CSSのanimation-directionプロパティとは
animation-directionプロパティを使用すると、アニメーションを順方向で再生するか、逆方向で再生するか、あるいは順方向と逆方向を交互に繰り返すかを設定できます。
基本的な使い方
以下の例では、animation-direction: reverse; を指定しています。この設定により、アニメーションは逆方向に再生され、背景色は青から緑へと変化します。
例
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
background-color: yellow;
animation-name: myanim;
animation-duration: 2s;
animation-direction: reverse;
}
@keyframes myanim {
from {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
animation-directionに指定できる値
animation-directionプロパティには、以下の4つの値を指定できます。
- normal … 順方向に再生します（初期値）。
- reverse … 逆方向に再生します。
- alternate … 順方向と逆方向を交互に繰り返し再生します。
- alternate-reverse … 逆方向から開始し、順方向と交互に繰り返し再生します。
まとめ
animation-directionプロパティを活用すれば、同じ@keyframes定義でも再生の向きを自由にコントロールできます。特にalternateやalternate-reverseは、往復運動のような自然なアニメーション表現に便利なので、ぜひ活用してみてください。
-
CSSのborder-colorプロパティで4つの境界線の色を個別に設定する方法
CSSで4つの境界線の色を設定するには 要素の4つの境界線（上・右・下・左）それぞれに異なる色を指定したい場合は、border-colorプロパティを使用します。このプロパティには最大4つの値を半角スペースで区切って指定でき、色は上 → 右 → 下 → 左の順番（時計回り）で適用されます。 なお、border-colorを機能させるには、あらかじめborder-styleプロパティで境界線のスタイル（solid、dashed、dottedなど）を設定しておく必要があります。スタイルが未指定の場合、初期値が「none」となり、境界線自体が表示されない点に注意しましょう。 コード例 以下のコードで
-
CSSのtext-alignプロパティでテキストの配置を設定する方法
CSSでテキストの配置（揃え位置）を設定するには、text-alignプロパティを使用します。このプロパティは、ブロック要素内のインラインコンテンツ（主にテキスト）を左寄せ・右寄せ・中央揃え・両端揃えのいずれかに整列させるために使われます。text-alignプロパティの値指定できる主な値は以下のとおりです。text-align: left | right | center | justify | initial | inherit;left: テキストを左端に揃えます（多くの言語でのデフォルト値）right: テキストを右端に揃えますcenter: テキストを中央に揃えますjustify: