【CSS】ベージ移行時にフワッとページを表示する方法

■ レイアウトデザインに使うHTMLタグ

フワッとフェードインしながらページを表示するには、
CSSの「animation」プロパティが使用される。

フワッとフェードインするページ表示のCSSサンプルコード

CSSプロパティ「animation」とは

CSSプロパティ「animation」は、一括指定プロパティ。
・animation-name
・animation-duration
・animation-timing-function
・animation-delay
・animation-iteration-count
・animation-direction
・animation-fill-mode
・animation-play-state
の値をまとめて指定できるプロパティ。

「animation」の書式

animation: duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name
animation: duration | timing-function | delay | name
animation: duration | name


animation: 3s ease-in 1s 2 reverse both paused slidein;
animation: 3s linear 1s slidein;
animation: 3s slidein;

初期値

animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;


Back