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

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

FlexBox

CSS FlexBoxは、サイズが不明な要素を動的にうまくレイアウトしてくれるレイアウトモジュールです。正式には「CSS Flexible Box Layout Module」という名称です。このFlexBoxにもアニメーションできるプロパティがあります。

order 整数
  • s01
  • s02
  • s03
  • s04
  • s05

クリックしたトランプが1番左端に移動します。3秒間隔のアニメーションにしているので、何度かクリックしていると時間を置いて並び替えが行われているのに気づくと思います。orderは滑らかには動かないようですね。FireFoxでは動きますが、MS EdgeとChormeではサポートしていないようです。

flex-grow 実数
  • s01
  • s02
  • s03

クリックしたトランプのflex-grow値が変わり、トランプの周りのスペースが広がります。こちらはMS EdgeとChormeでも動きます。

flex-shrink 実数
  • s01
  • s02
  • s03

クリックしたトランプのflex-shrink値が変わり、トランプの周りのスペースが狭まります。こちらはMS EdgeとChormeでも動きます。「flex-shrink」は「flex-wrap: wrap;」と併用しない方がいいようです。

flex-basis 実数
  • s01
  • s02
  • s03

クリックしたトランプのflex-basis値が変わり、トランプの領域幅が全体の25%になるように動きます。こちらはMS EdgeとChormeでも動きます。

フォント

プロパティ 可能な値
font-weight 実数を指定するとfont-weightで使える100~900の100刻みの整数に丸められる。normalやboldなども使用可。
フォントの太さ

font-weightは100刻みの数値に丸められるのでカクカクした動きになりますね・・・。

font-stretch 幅の狭い方からultra-condensed,extra-condensed,condensed,semi-condensed,normal,semi-expanded,expanded,extra-expanded,ultra-expanded。narrowerとwiderはアニメーション不可。
Font Stretch

FireFoxだけ動いているようですが、こちらもfont-weight同様、滑らかに動かないですね。

font-size 長さ指定
フォントの大きさ
font-size-adjust 実数
bbbb

上記のフォントはfont-family:Verdana, Futura, Timesの順に並んでいます。青枠のものはVerdanaです。フォントサイズはみな同じです。青枠をマウスオーバーすると、別のフォントサイズに合うようにサイズが小さくなります(このサンプルではサイズの小さい方に合わせて調整しています)。こちらはFireFoxでは動きましたが、Chromeは動きませんでした。

position

プロパティ 可能な値
top 長さか%指定
top
right 長さか%指定
right
bottom 長さか%指定
bottom
left 長さか%指定
left
z-index 整数

赤いのをマウスオーバーするとだんだん前面にきます。


広告
  • LINEで送る