CSS3 transitionプロパティでアニメーションを実装する
ウェブデザインではアニメーションが普及してきているようだ。CSS3にはTransitionとAnimationという機能があり、Transitionのトリガーとして利用できるものは、:hover、:acrive、:target、:focus、:checkedなど。
ひとつ、上の「eye」の画像をタップするとアニメーション(transition)が実行される。
例えば、transition:all .4s ease-in-out;
- transition: 変化の仕方を指定するプロパティ
- transition-property: all; 省略した場合は「all」
- transition-duration: .4s; 変化にかかる時間(秒)
- transition-timing-function:ease-in-out; ゆっくり始まりゆっくり終わる動作
- transition-delay:0; 省略した場合は「0」変化が始まる時間を指定
- 「box-sizing: border-box;」も活躍した。paddingとborderがwidthとheightの中に含まれるようになり、レスポンシブ向けレイアウトではより便利さを感じて使えるから嬉しい。
ふたつ、ここをタップするとモザイクの四角形が再アニメーションする。
- animation プロパティ(アニメーション形式を指定、適用したアニメーションの開始時間、開始されてから終了するまでの時間、アニメーションの繰り返し回数を指定)
- @keyframes を使ってアニメーションの開始から終了までの挙動を実装する
- transform:scale() 2つの数値で2D縮尺比率を指定
widh: 100%; と width: 100vw;
ところで、このページのウェブレイアウトをCSSで設定しているときに作業が引っ掛かった。横幅が所定の指定をはみ出している。そこで「%」と「vw」を再確認した。ビューポートの幅というのは、ブラウザのスクロールバーを含んだサイズで計算される。ページにスクロールを伴う要素に「100vw」を設定すると、その要素はhtmlとbodyより大きいサイズになってしまうということだ。