CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでtext-indentプロパティをアニメーションさせる方法

CSSでtext-indentプロパティをアニメーションさせる方法

CSSでは、テキストの1行目の字下げ幅を指定するtext-indentプロパティにも、@keyframesルールとanimationプロパティを組み合わせることでアニメーションを適用できます。インデントが滑らかに変化する動きは、段落の強調やページの演出効果など、さまざまな場面で活用できます。

以下のサンプルコードでは、3秒間のアニメーションを無限に繰り返すよう設定し、進行率が30%に達したタイミングでtext-indentの値を120pxまで変化させています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: orange;
  border: 2px solid blue;
  animation: myanim 3s infinite;
}
@keyframes myanim {
  30% {
    text-indent: 120px;
  }
}
</style>
</head>
<body>
<h1>CSS text-indent property</h1>
<div>
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.
</div>
</body>
</html>

コードのポイント

  • animation: myanim 3s infinite; — 「myanim」という名前のアニメーションを3秒かけて無限に繰り返します。
  • @keyframes myanim — アニメーションの途中経過を定義します。ここでは進行率30%の位置でtext-indent: 120px;を指定しています。
  • text-indentはアニメーション可能なプロパティのため、初期値から指定値へと自動的に滑らかに補間されます。

このコードをブラウザで実行すると、オレンジ色の背景を持つボックス内のテキストの1行目が、インデント幅が変化しながら動くアニメーションを確認できます。30%の値や120pxの数値を変更すれば、アニメーションのスピードや動きの幅を自由に調整することも可能です。

  1. CSSのrightプロパティとは？構文と使い方を実例付きで解説

    CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini

  2. CSSのtext-indentプロパティを使ってテキストをインデントする方法

    CSSのtext-indentプロパティを使用すると、段落の先頭に挿入されるインデント（字下げ）の幅を指定することができます。文章の読みやすさやデザイン性を高めたい場合に便利なプロパティです。基本的な使い方以下の例では、text-indentプロパティを使って、段落の先頭にパーセンテージ指定でインデントを設定しています。<!DOCTYPE html> <html> <head> <style> p { text-indent: 15%; } article { background-color: darkgray; mar