ホームページで使えるアニメーションについて(CSS編)
最近ではアニメーションが実装されたWebサイトも多くなり、趣向を凝らしたリッチな演出を取り入れているサイトもそう珍しくなくなってきました。特に重要な要素を動かすことで興味を引かせたり、飽きずに読み進めてもらうためのきっかけになったり、といったメリットがありますよね。
本記事では、シンプル・綺麗、ポップ、スタイリッシュ、柔らかい印象などのイメージ別にCSSアニメーションをご紹介します。
デモ・サンプルコード付きですので、ぜひイメージ通りのアニメーションを探してご活用ください。
フェードイン
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.anim–box.fadein.is–animated {
animation: fadeIn 0.7s cubic–bezier(0.33, 1, 0.68, 1) 1 forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
|
スライドイン
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.anim–box.slidein.is–animated {
animation: slideIn 1s cubic–bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slideIn {
0% {
transform: translateX(180px);
opacity: 0;
}
100% {
transform: translateX(0);
}
40%,100% {
opacity: 1;
}
}
|
ズームイン
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.anim–box.zoomin.is–animated {
animation: zoomIn 0.8s cubic–bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes zoomIn {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
opacity: 1;
transform: scale(1);
}
}
|
跳ねるスライドイン
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.anim–box.poyoyon.is–animated {
animation: poyoyon 0.5s cubic–bezier(0.12, 0, 0.39, 0) 1 forwards;
}
@keyframes poyoyon {
0% {
transform: translateX(140px);
opacity: 0;
}
50% {
transform: translateX(0);
}
65% {
transform: translateX(30px);
}
100% {
transform: translateX(0);
}
20%,100% {
opacity: 1;
}
}
|
ななめからスライドイン
勢いよく右下からスライドインしてきます。
同じ要素が複数並ぶコンテンツで、出てくる方向を変えて左右交互に表示されていく、なんてこともできます。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.anim–box.slide–skew.is–animated {
animation: slide–skew 0.4s cubic–bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slide–skew {
0% {
transform: translate(180px,30px);
opacity: 0;
}
100% {
transform: translate(0,0);
}
20%,100% {
opacity: 1;
}
}
|
ポップアップ
スライドアップしながらフェードインします。
モーダルやポップアップウィンドウが開くときのアニメーションに使えそうです。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.anim–box.popup.is–animated {
animation: popup 0.6s cubic–bezier(0.22, 1, 0.36, 1) 1 forwards;
}
@keyframes popup {
0% {
transform: translateY(40px) scale(0.8);
opacity: 0;
}
100% {
transform: translateY(0) scale(1.0);
}
80%, 100% {
opacity: 1;
}
}
|
