[CSS3][Sass] 要素を順番にフワッと表示するアニメーションを CSS の animation プロパティで作る
単なる横並びのボックスも、アニメーションを少しつけるだけで目を引くものになります。スマートフォンやモダンブラウザのみがターゲットとなりますが、表示する時に順々にふんわりとしたアニメーションをつけて表示するサンプルをCSSのみで作ってみました。
CSS3 の animation プロパティを使用しているので、ベンダープレフィックスやキーフレームなども合わせるとコードが沢山になってしまいます。そこで、Sass を利用して簡単に書く方法も合わせてご紹介します。
完成サンプル
下のサンプルが完成形となります。「Return」をクリックするとアニメーションを再度開始します。
See the Pen 順にフワッと表示するCSS by Saomocari (@Saomocari) on CodePen.
HTML コード
HTML コードはシンプルなリストになります。順番に表示する要素が li になるので、li にクラスを付けて置きます。
<ul> <li class="item">1</li> <li class="item">2</li> <li class="item">3</li> <li class="item">4</li> <li class="item">5</li> <li class="item">6</li> </ul>
CSS コード
サンプルの li.item の装飾は以下のような四角のボックスを表示するコードとなっています。最後に opacity: 0 を指定してボックスを透明にします。
.item{
float: left;
margin-right: 10px;
padding: 10px;
width: 60px;
height: 60px;
background: #EF5F5D;
color: #fff;
list-style: none;
text-align: center;
line-height: 60px;
opacity: 0;
}
次に、nth-child を使って全ての .item に時間差をつけてアニメーションが開始するようにします。このサンプルでは第4引数の、animation-delay （アニメーションを開始する時間を設定するプロパティ）を 0.5 秒ずつずらして設定しています。
.item:nth-child(1) {
-webkit-animation: example 0.5s ease 0.5s 1 forwards;
animation: example 0.5s ease 0.5s 1 forwards;
}
.item:nth-child(2) {
-webkit-animation: example 0.5s ease 1s 1 forwards;
animation: example 0.5s ease 1s 1 forwards;
}
.item:nth-child(3) {
-webkit-animation: example 0.5s ease 1.5s 1 forwards;
animation: example 0.5s ease 1.5s 1 forwards;
}
：
：
続けて、どんなアニメーションにするかを決める @keyframes を記述します。フワッと表示するだけなら以下のように 100% の値に opacity: 1 を設定すれば OK です。
@-webkit-keyframes example {
100% {
opacity: 1;
}
}
@keyframes example {
100% {
opacity: 1;
}
}
最初に .item には opacity: 0; を指定していたのでそれを 1 に変更し非透明にするとフワッとしたアニメーションになります。animation プロパティで時間差の設定をしておいたので、これで順番に表示するアニメーションが完成しました。全ての CSS コードは以下で確認できます。
.item{
float: left;
margin-right: 10px;
padding: 10px;
width: 60px;
height: 60px;
background: #EF5F5D;
color: #fff;
list-style: none;
text-align: center;
line-height: 60px;
opacity: 0;
}
@mixin animetionValue( $name, $duration , $function, $delay, $count, $state){
-webkit-animation: $name $duration+s $function $delay+s $count $state;
animation: $name $duration+s $function $delay+s $count $state;
}
@for $cnt from 1 through 6{
.item:nth-child(#{$cnt}){
@include animetionValue(example, 0.5, ease, $cnt * 0.5 , 1, forwards);
}
}
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
@include keyframes(example) {
100% {
opacity: 1;
}
}See the Pen 順にフワッと表示するCSS by Saomocari (@Saomocari) on CodePen.
Sass を使って簡単にコードを書く
nth-child / ベンダープレフィック / @keyframes の指定は同じようなことを何度も書かなくていけないのが少し面倒です。そこで、Sass の mixin と for の機能を使って簡単に書いてみます。
animation プロパティを mixin で定義する
以下のように、animation プロパティを mixin で定義します。
@mixin animationValue( $name, $duration, $function, $delay, $count, $state){
-webkit-animation: $name $duration+s $function $delay+s $count $state;
animation: $name $duration+s $function $delay+s $count $state;
}
$name はアニメーションキーフレームの名前 / $duration はアニメーション時間 / $function はアニメーションの動き（ease など） / $delay はアニメーションの開始時間 / $count はアニメーションのくり返し回数 / $state はアニメーションが終わった時の状態を指定します。必要に応じて mixin の内容は書き換えて下さい。
ntn-child でセレクタ指定し、mixin を呼びだす
つづいて、定義した animation を @include で呼び出します。セレクタ指定に nth-child を使いますが、子要素の数は 6 個なので for 文を使って 6 回繰り返す処理をし、6 個分の nth-child をいっきに書いてしまいます。
// ↓through の後の数字を子要素の数字にすることで
// ↓{}（ブレース）内の処理をその回数分繰り返します。
@for $cnt from 1 through 6{
// ↓nth-child の中の数字を #{$cnt} として現在の繰り返しているカウント数にします
.item:nth-child(#{$cnt}){
// ↓ include で animation プロパティを定義した mixin を呼び出す。
// ↓現在のカウント数（$cnt）に少数値をかけた値を $delay
// ↓に指定することで時間差をつけることができる
@include animationValue(example, 0.5, ease, $cnt * 0.5 , 1, forwards);
}
}
ここまでを CSS に書き出すと以下のようになります。
.item:nth-child(1) {
-webkit-animation: example 0.5s ease 0.5s 1 forwards;
animation: example 0.5s ease 0.5s 1 forwards;
}
.item:nth-child(2) {
-webkit-animation: example 0.5s ease 1s 1 forwards;
animation: example 0.5s ease 1s 1 forwards;
}
.item:nth-child(3) {
-webkit-animation: example 0.5s ease 1.5s 1 forwards;
animation: example 0.5s ease 1.5s 1 forwards;
}
.item:nth-child(4) {
-webkit-animation: example 0.5s ease 2s 1 forwards;
animation: example 0.5s ease 2s 1 forwards;
}
：
：
キーフレームを mixin で定義して呼び出す
アニメーションを定義する @keyframes もベンダープレフィックが必要になりますが、同じことを書くのは面倒です。ここでも、mixin を利用して1回の記述で済ませてしまいます。
以下のように mixin を定義します。$name はアニメーション名が入ります。
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
以下のように記述して先に書いた mixin を呼び出します。@include の {} 内にアニメーションを指定します。
@include keyframes(example) {
100% {
opacity: 1;
}
}
これを CSS に書き出すと以下のようになります。
@-webkit-keyframes example {
100% {
opacity: 1;
}
}
@keyframes example {
100% {
opacity: 1;
}
}
全ての CSS コードは以下で見ることができます。
.item{
float: left;
margin-right: 10px;
padding: 10px;
width: 60px;
height: 60px;
background: #EF5F5D;
color: #fff;
list-style: none;
text-align: center;
line-height: 60px;
opacity: 0;
}
@mixin animationValue( $name, $duration , $function, $delay, $count, $state){
-webkit-animation: $name $duration+s $function $delay+s $count $state;
animation: $name $duration+s $function $delay+s $count $state;
}
@for $cnt from 1 through 6{
.item:nth-child(#{$cnt}){
@include animationValue(example, 0.5, ease, $cnt * 0.5 , 1, forwards);
}
}
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
@include keyframes(example) {
100% {
opacity: 1;
}
}See the Pen 順にフワッと表示するCSS(Sass_ver) by Saomocari (@Saomocari) on CodePen.
アニメーションにアレンジを加える
先のサンプルコードへほんの少し手を加えるだけでも、ひと味ちがったアニメーションにできます。例えば、以下のサンプルのように上から落ちてくるようなアニメーションにすることも簡単です。
See the Pen 順にフワッと表示するCSS+ちょっとしたアニメーション by Saomocari (@Saomocari) on CodePen.
これは、最初の .item の CSS に transform: translateY(-100%); を指定して上の方の位置へ移動させておき、@keyframes のアニメーション指定の時に transform: translateY(0); を指定して元の位置へ戻しているだけです。
コードは上記サンプルの SCSS のタグをクリックで確認できます。
keyframes の指定を変えるだけで印象の違うアニメーションを簡単に作ることができるので、CSS アニメーションは楽しいですね。CSS だけで書こうとすると少し面倒ですが、Sass の mixin などを使えばわりとササッと書けます。animation プロパティは IE では 10+ でしか対応していないので、当たり前に使用できるようになるのはもう少し先でしょうか…。
animation プロパティの基本的な使い方は、過去の記事「CSS3、animation プロパティでアニメーションを作る ｜ memocarilog」で紹介していますが、まとまりがなさすぎて何書いているのか不明なので、また書きなおしたいなと思っています。
1 Comments & Tracbacks