CSSでつくるアニメーシン第二弾です。今回はサッカーボールをCSSでアニメーションにしてみました。
伸びたり、飛んだりと色んなバリエーションで作成してみたのでメモします。
伸縮する
伸びたり縮んだりします。
.shinsyuku {
-webkit-animation: shinsyuku 0.8s linear 0s 1;
animation: shinsyuku 0.8s linear 0s 1;
}
@-webkit-keyframes shinsyuku {
0% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
15% { -webkit-transform: scale(0.9, 0.9) translate(0%, 5%); }
30% { -webkit-transform: scale(1.3, 0.8) translate(0%, 10%); }
50% { -webkit-transform: scale(0.8, 1.3) translate(0%, -10%); }
70% { -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@keyframes shinsyuku {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); }
15% { transform: scale(0.9, 0.9) translate(0%, 5%); }
30% { transform: scale(1.3, 0.8) translate(0%, 10%); }
50% { transform: scale(0.8, 1.3) translate(0%, -10%); }
70% { transform: scale(1.1, 0.9) translate(0%, 5%); }
100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
左右に揺れる
左や右に転がるようにゆれます。
.yureru {
-webkit-animation: yureru 2.5s linear 0s 1;
animation: yureru 2.5s linear 0s 1;
}
@-webkit-keyframes yureru {
0% { -webkit-transform: translate(0%, 0%); }
5% { -webkit-transform: translate(10%, 0%) rotate(10deg); }
25% { -webkit-transform: translate(20%, 0%) rotate(20deg); }
30% { -webkit-transform: translate(-10%, 0%) rotate(-10deg); }
35% { -webkit-transform: translate(-15%, 0%) rotate(-15deg); }
45% { -webkit-transform: translate(10%, 0%) rotate(10deg); }
50% { -webkit-transform: translate(15%, 0%) rotate(15deg); }
60% { -webkit-transform: translate(-5%, 0%) rotate(-5deg); }
65% { -webkit-transform: translate(-7%, 0%) rotate(-7deg); }
75% { -webkit-transform: translate(0%, 0%) rotate(0deg); }
100% { -webkit-transform: translate(0%, 0%) rotate(0deg); }
}
@keyframes yureru {
0% { transform: translate(0%, 0%); }
5% { transform: translate(10%, 0%) rotate(10deg); }
25% { transform: translate(20%, 0%) rotate(20deg); }
30% { transform: translate(-10%, 0%) rotate(-10deg); }
35% { transform: translate(-15%, 0%) rotate(-15deg); }
45% { transform: translate(10%, 0%) rotate(10deg); }
50% { transform: translate(15%, 0%) rotate(15deg); }
60% { transform: translate(-5%, 0%) rotate(-5deg); }
65% { transform: translate(-7%, 0%) rotate(-7deg); }
75% { transform: translate(0%, 0%) rotate(0deg); }
100% { transform: translate(0%, 0%) rotate(0deg); }
}
プルプルする
プルプルと動きます。
.purupuru {
-webkit-animation: purupuru 0.8s linear 0s 1;
animation: purupuru 0.8s linear 0s 1;
}
@-webkit-keyframes purupuru {
0% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
20% { -webkit-transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
50% { -webkit-transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
65% { -webkit-transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
80% { -webkit-transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@keyframes purupuru {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); }
20% { transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
50% { transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
65% { transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
80% { transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
バウンドする
上から落ちて跳ねる動きです。
.bound {
-webkit-animation: bound 1.1s linear 0s 1;
animation: bound 1.1s linear 0s 1;
}
@-webkit-keyframes bound {
0% { -webkit-transform: scale(0.8, 1.4) translate(0%, -100%); }
10% { -webkit-transform: scale(0.8, 1.4) translate(0%, -15%); }
20% { -webkit-transform: scale(1.4, 0.6) translate(0%, 30%); }
30% { -webkit-transform: scale(0.9, 1.1) translate(0%, -10%); }
40% { -webkit-transform: scale(0.95, 1.2) translate(0%, -30%); }
50% { -webkit-transform: scale(0.95, 1.2) translate(0%, -10%); }
60% { -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
70% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@keyframes bound {
0% { transform: scale(0.8, 1.4) translate(0%, -100%); }
10% { transform: scale(0.8, 1.4) translate(0%, -15%); }
20% { transform: scale(1.4, 0.6) translate(0%, 30%); }
30% { transform: scale(0.9, 1.1) translate(0%, -10%); }
40% { transform: scale(0.95, 1.2) translate(0%, -30%); }
50% { transform: scale(0.95, 1.2) translate(0%, -10%); }
60% { transform: scale(1.1, 0.9) translate(0%, 5%); }
70% { transform: scale(1.0, 1.0) translate(0%, 0%); }
100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
ジャンプする
ジャンプします。
.jump {
-webkit-animation: jump 0.9s linear 0s 1;
animation: jump 0.9s linear 0s 1;
}
@-webkit-keyframes jump {
0% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
10% { -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
40% { -webkit-transform: scale(1.2, 0.8) translate(0%, 15%); }
50% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
60% { -webkit-transform: scale(0.9, 1.2) translate(0%, -100%); }
75% { -webkit-transform: scale(0.9, 1.2) translate(0%, -20%); }
85% { -webkit-transform: scale(1.2, 0.8) translate(0%, 15%); }
100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@keyframes jump {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); }
10% { transform: scale(1.1, 0.9) translate(0%, 5%); }
40% { transform: scale(1.2, 0.8) translate(0%, 15%); }
50% { transform: scale(1.0, 1.0) translate(0%, 0%); }
60% { transform: scale(0.9, 1.2) translate(0%, -100%); }
75% { transform: scale(0.9, 1.2) translate(0%, -20%); }
85% { transform: scale(1.2, 0.8) translate(0%, 15%); }
100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
伸びて戻る
グーッと伸びて戻ります。
.back {
-webkit-animation: back 1.0s linear 0s 1;
animation: back 1.0s linear 0s 1;
}
@-webkit-keyframes back {
0% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
40% { -webkit-transform: scale(0.95, 1.2) translate(0%, -10%); }
50% { -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
60% { -webkit-transform: scale(0.95, 1.05) translate(0%, -3%); }
70% { -webkit-transform: scale(1.05, 0.95) translate(0%, 3%); }
80% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@keyframes back {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); }
40% { transform: scale(0.95, 1.2) translate(0%, -10%); }
50% { transform: scale(1.1, 0.9) translate(0%, 5%); }
60% { transform: scale(0.95, 1.05) translate(0%, -3%); }
70% { transform: scale(1.05, 0.95) translate(0%, 3%); }
80% { transform: scale(1.0, 1.0) translate(0%, 0%); }
100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
デモ用意しました。
