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

今回は、CSSでアニメーション可能なプロパティをひととおり試してみます。アニメーションを考える上での基本は絵コンテですが、完成したらどんな動きをするのかというサンプルを知っているといないのとではまた違うので、とにかくやってみます。

基本的にPCではマウスオーバー、スマホではタッチでサンプルが動き出します。

背景と枠線

プロパティ 可能な値
background 個々のプロパティ仕様に従う
background-color (R,G,B,α)の色。#A1EFD6, rgba(161,239,214,0.88), grayなど。
背景色
background-position 長さか%指定。10px, 50%など。right, top, bottom, leftはアニメーション可。
background-size 長さか%指定。そのため、auto, contain, covorのアニメーションは不可。
border 個々のプロパティ仕様に従う
border-top, border-right, border-bottom, border-left 個々のプロパティ仕様に従う
border-color 個々のプロパティ仕様に従う
border-top-color , border-right-color, border-bottom-color, border-left-color (R,G,B,α)の色。
枠線の色
border-radius 個々のプロパティ仕様に従う
border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius 長さか%指定。「3px / 5px」といった楕円形の曲線を使った角丸もアニメーション可。
角丸楕円角丸
box-shadow 影の距離, ぼかし距離, 広がり距離は長さ指定(%指定不可), 影の色は(R,G,B,α)の色を補間する。noneは長さ0扱い。inset有無の切り替えはできない。
影の距離ぼかし距離広がり距離影の色insetnone

ボックス

ボックスというのはいわゆる下図のようなモデルです。コンテント、padding、border、marginという領域が隣接しています。そのボックスに関するスタイル定義のうち、アニメーション可能なプロパティです。

box

プロパティ 可能な値
padding 個々のプロパティ仕様に従う
padding-top , padding-right, padding-bottom, padding-left 長さか%指定。autoはアニメーション不可。
padding
margin 個々のプロパティ仕様に従う
margin-top, margin-right, margin-bottom, margin-left 長さか%指定。autoはアニメーション不可。
margin
width 長さか%指定。autoはアニメーション不可。
width
height 長さか%指定。autoはアニメーション不可。
height
min-width, min-height 長さか%指定。autoはアニメーション不可。
min
max-width, max-height 長さか%指定。autoはアニメーション不可。
max
広告
  • LINEで送る