CSSでアニメーション可能なプロパティをとにかく試す(3)

前回の続きで、CSSでアニメーション可能なプロパティを試していきます。

テキスト

プロパティ 可能な値
word-spacing 長さか%指定。normalも可。
 → ←
 → ←
 → ←
 → ←
キーボードの半角スペース→ ←
キーボードの全角スペース→ ←

上の文字をマウスオーバーするとスペース幅が変わります。word-spacingが有効なスペース文字がそもそもキーボードの半角と だけのようです。

letter-spacing 長さか%指定。normalも可。
文字間の幅

FireFoxはアニメーションせず、EdgeとChromeはアニメーションしているようです。

text-indent 長さか%指定。normalも可。

インデント量

normalも可となっていますが、例えばnormal→3emというアニメーションはEdgeではアニメーションせず、逆に3em→normalとするとChromeでもFireFoxでも動きませんでした。normalは使わず0を使った方がよさそうです。

テキスト修飾

プロパティ 可能な値
text-decoration-color (R,G,B,α)の色
テキスト下線の色

こちらはFireFoxだけアニメーションしているようです。EdgeとChromeは色が変わりません。

text-emphasis-color (R,G,B,α)の色

テキスト強調の色

対応ブラウザが少ないです。「-webkit-」を付けたらChromeでは強調が表示されましたが、EdgeやFireFoxでは表示もされませんでした。Chromeも表示だけでアニメーションはしませんでした。

text-shadow 影の距離, ぼかし距離, 広がり距離は長さ指定(%指定不可), 影の色は(R,G,B,α)の色を補間する。noneは長さ0扱い。inset有無の切り替えはできない。

影の水平距離

影の垂直距離

影のぼかし半径

影の色

テーブル

プロパティ 可能な値
border-spacing 長さ指定
1 2 3
4 5 6
7 8 9

「border-collapse: collapse;」が効いているとborder-spacingは変わりませんので注意ですね。

CSS Transforms

「CSS Transforms」というCSSモジュールは要素の移動や縮尺、変形などを行います。transformプロパティを使うとかなりいろいろなアニメーションができます。

プロパティ 可能な値
transform 各関数の説明において、距離:長さか%指定、比率:実数、角度:90度だったら90degなど、数値:実数と指定

・移動 translate(X方向の移動距離, Y方向の移動距離)

・移動 translateX(X方向の移動距離)

・移動 translateY(Y方向の移動距離)

・移動 translateZ(Z方向の移動距離)
3D空間の中で子要素がそれぞれの位置を維持するように描画するには「transform-style: preserve-3d;」の定義が必須です。デフォルトでは3Dになりません。

※Z軸移動はデフォルトで画面に垂直方向のため動きが分かりづらいです。なので、「transform: rotateX(3deg) rotateY(-30deg);」などとして座標軸に沿った回転をさせてz軸のみ移動させています。

・移動 translate3d(X方向の移動距離, Y方向の移動距離, Z方向の移動距離)

・縮尺 scale(X方向の縮尺比率, Y方向の縮尺比率)

・縮尺 scaleX(X方向の縮尺比率)

・縮尺 scaleY(Y方向の縮尺比率)

・縮尺 scaleZ(Z方向の縮尺比率)

※z方向に変形させるためには、「transform: perspective(500px) scaleZ(5) rotateX(30deg) rotateY(30deg);」というように、perspectiveプロパティを使用する必要があります。

・縮尺 scale3d(X方向の縮尺比率, Y方向の縮尺比率, Z方向の縮尺比率)

・回転 rotate(回転角度)

・回転 rotateX(X軸を軸とする回転角度)

・回転 rotateY(Y軸を軸とする回転角度)

・回転 rotateZ(Z軸を軸とする回転角度)

・回転 rotate3d(x, y, z, 回転角度)

※rotate3dの[x,y,z]の部分は方向ベクトルで、そのベクトルに沿った回転角度を第4引数で指定します。内部の計算式は複雑すぎるので、使いこなすのは難しそうです。

・傾斜 skew(X軸の傾斜角度, Y軸の傾斜角度)

・傾斜 skewX(X軸の傾斜角度)

・傾斜 skewY(Y軸の傾斜角度)

・行列を使用した2D変形 matrix(数値, 数値, 数値, 数値, 数値, 数値)

・行列を使用した3D変形 matrix3d(数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値)

transform-origin 長さか%指定

・回転 rotateY(Y軸を軸とする回転角度)に「transform-origin」を指定

・rotateY(Y軸を軸とする回転角度)で回転させた要素の「transform-origin」をアニメーション

transform-originは例えば上の例のように回転軸を左端にして回転(デフォルトは中心を軸に回転)させたりします。transform-originだけをアニメーションさせると下の例のようにただ回転軸を左端にして回転した結果になるように動きます。組み合わせ次第で面白い動きが出来そうですが・・・。

このシリーズはいったんこれで完了です。残っているのはベンダー実装が進んでいないモジュールばかりなので試せませんでした。

広告
  • LINEで送る