CSSでmargin（マージン）プロパティをアニメーションさせる方法
CSSでmarginプロパティをアニメーションさせる方法
CSSでは、@keyframesルールとanimationプロパティを組み合わせることで、要素のmargin（マージン）プロパティを滑らかにアニメーションさせることができます。マージンは数値として補間可能なプロパティのため、キーフレームの間で自動的に中間値が計算され、余白が徐々に変化するアニメーションを実現できます。
以下のサンプルコードでは、段落要素のマージンが3秒間の周期で変化し、その動きが無限に繰り返されます。
実装例
<!DOCTYPE html>
<html>
<head>
<style>
p {
animation: mymove 3s infinite;
margin: 20px;
}
@keyframes mymove {
70% {
margin: 60px;
}
}
</style>
</head>
<body>
<p>This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
</p>
</body>
</html>コードの解説
- animation: mymove 3s infinite; … 「mymove」という名前のアニメーションを、3秒間の周期で無限に繰り返すよう指定しています。
- @keyframes mymove … アニメーションの途中経過を定義します。ここでは進行率70%の時点でマージンが60pxになるよう設定しています。
- margin: 20px; … アニメーション開始前の初期マージン値です。
このコードをブラウザで実行すると、テキスト周囲の余白が20pxから60pxへと徐々に広がり、再び戻る動きが繰り返されます。70%の値を変更すれば変化のタイミングを、3sの部分を変更すればアニメーションの速度を自由に調整できます。
-
CSSのtext-justifyプロパティとは？使い方と各値の解説
text-justifyプロパティとは CSSのtext-justifyプロパティは、text-alignプロパティにjustify(両端揃え)が指定されている場合に、テキストをどのような方法で均等割り付けするかを制御するためのプロパティです。単語間のスペースで調整するか、文字間のスペースで調整するかなどを細かく指定できます。 構文 text-justify: auto | inter-word | inter-character | none | initial | inherit; プロパティの値一覧 auto — ブラウザが最適な揃え方を自動的に判断します(既定値)。 inter-
-
CSSのrightプロパティとは？構文と使い方を実例付きで解説
CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini