CSS animation day30 となりました。
ついに、１ヶ月経ちました。継続することって本当に難しいですね・・。
私の人生のミッション(使命)は、世界の裏側の小さな小さな病院を、アートが取り入れられている環境にすることです。そこでは、患者さんだけでなく職員も癒され、医療というマイナスでストレスフルなイメージが、全く違うものになる未来になっています。
自分がこの取り組みをやめてしまうと、この未来は永劫に来ないと思っており、のしかかる責任は重大と考えております。これからも、医師として、エンジニアとして、design とart を学び発信していきます。
1. 完成版
See the Pen slime monster! by hiroya iizuka (@hiroyaiizuka) on CodePen.
2. 参考文献
Tips note
Jello Stapler
スライム無料画像
3. 分解してみる
❶.
マークアップしましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container">
<div class="slime"></div>
</div>
</body>
</html>
body {
padding: 0;
margin: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.slime {
background: url("../img/slime.png");
background-position: center center;
background-size: cover;
display: block;
height: 800px;
width: 800px;
}
うん、可愛いですね。
❷.
では、このスライムにskew animation をつけて、動きを観察しましょう。
まずは、X軸のみ、skew をかけます。
.slime {
background: url("../img/slime.png");
background-position: center center;
background-size: cover;
display: block;
height: 600px;
width: 600px;
animation: move 6s linear infinite;
}
@keyframes move {
0% {
transform: skew(0deg, 0deg);
}
10% {
transform: skew(10deg, 0deg);
}
20% {
transform: skew(-8deg, 0deg);
}
30% {
transform: skew(6deg, 0deg);
}
40% {
transform: skew(-4deg, 0deg);
}
50% {
transform: skew(2deg, 0deg);
}
100% {
transform: skew(0deg, 0deg);
}
}
横にフリフリ動きました。
続いて、Y軸にskewをかけましょう。
@keyframes move {
0% {
transform: skew(0deg, 0deg);
}
10% {
transform: skew(0deg, 10deg);
}
20% {
transform: skew(0deg, -8deg);
}
30% {
transform: skew(0deg, 6deg);
}
40% {
transform: skew(0deg, -4deg);
}
50% {
transform: skew(0deg, 2deg);
}
100% {
transform: skew(0deg, 0deg);
}
}
今度は縦に動きました。
この2つの結果からわかることは、つのを動かしたい時には、skewX, ボディを動かしたい時は、skewYが良さそうです。
では、rotate を組み合わせたら、どうなるでしょうか？
rotate + skewY
@keyframes move {
0% {
transform: skew(0deg, 0deg);
}
10% {
transform: skew(0deg, 10deg) rotate(10deg);
}
20% {
transform: skew(0deg, -8deg) rotate(-10deg);
}
30% {
transform: skew(0deg, 6deg) rotate(10deg);
}
40% {
transform: skew(0deg, -4deg) rotate(-10deg);
}
50% {
transform: skew(0deg, 2deg) rotate(10deg);
}
100% {
transform: skew(0deg, 0deg);
}
}
さっきのと、違いがわかりますでしょうか？笑
skew だけの時は、顔が伸びていましたが、rotate使うと補正が入り、修正されました。顔が常にまっすぐ向くようになって、違和感がなくなりましたね！
❸.
では、これらを全てうまく使って、スライムらしい動きを作りましょう。
@keyframes move {
0% {
transform: skew(0deg, 0deg);
}
5% {
transform: skew(2deg, 4deg) rotate(3deg);
}
10% {
transform: skew(-2deg, -2deg) rotate(-3deg);
}
15% {
transform: skew(1deg, 1deg);
}
20% {
transform: skew(2deg, 0deg);
}
50% {
transform: skew(0deg, 4deg) rotate(1deg);
}
55% {
transform: skew(18deg, -16deg);
}
60% {
transform: skew(-15deg, 16deg);
}
65% {
transform: skew(4deg, -4deg) rotate(-3deg);
}
80% {
transform: skew(-4deg, 2deg) rotate(-1deg);
}
100% {
transform: skew(0deg, 0deg);
}
}
出来上がりました。
❹.
ディズニーによって開発された、アニメーションの12原則というものがあるそうで、これをみてイメージを掴みつつ、アニメーションへ取り入れます。
@keyframes move {
0% {
transform: skew(0deg, 0deg);
}
10% {
transform: skew(2deg, 4deg) rotate(3deg);
}
15% {
transform: skew(-2deg, -2deg) rotate(-3deg);
}
20% {
transform: skew(2deg, 0deg);
}
30% {
transform: skew(0deg, 2deg);
}
50% {
transform: scale(6, 2) translate(0, -1000px);
}
55% {
transform: scale(1), translate(0, 0);
}
58% {
transform: translate(0, 200px);
}
60% {
transform: translate(0, -240px) skew(-5deg, 10deg);
}
65% {
transform: translate(0, 60px);
}
68% {
transform: translate(0, -60px) skew(5deg, -10deg);
}
75% {
transform: translate(0, 40px);
}
77% {
transform: translate(0, -20px) skew(1deg, 2deg);
}
83% {
transform: translate(0, 10px);
}
85% {
transform: translate(0, -5px) (0, -20px) skew(1deg, 1deg);
}
86% {
transform: translate(0, 3px);
}
90% {
transform: translate(0, -1px);
}
93% {
transform: translate(0, 3px);
}
100% {
transform: skew(0deg, 0deg);
}
}
記念すべき１ヶ月目が気の抜けた作品になりました。。
みなさま、これからもよろしくお願いいたします！
それでは、また明日〜