CSS animation day 48となりました。
前回 mask を使って、画像を切り抜きました。
本日はそこに、アニメーションをいくつか実装していきます。
#1. 完成版
See the Pen BbdLvZ by hiroya iizuka (@hiroyaiizuka) on CodePen.
See the Pen Monster Dreaming Bird by hiroya iizuka (@hiroyaiizuka) on CodePen.
#2. 参考文献
seleQt
CSS-Mask Button Hover Animation
#3. 分解してみる
❶.
マークアップしましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container">
<img src="img/star.png" class="alpha-target" />
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background: #fffddd;
}
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
img {
display: block;
max-width: 50%;
height: auto;
margin: 0 auto;
}
.alpha-target {
-webkit-mask-image: url("../img/cat.png");
-webkit-mask-mode: alpha;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 300px;
-webkit-mask-position: center center;
transition: -webkit-mask-size 0.3s;
&:hover {
-webkit-mask-size: 900px;
}
}
まず、hover して画像が大きくなるようにしましょう。
body {
margin: 0;
padding: 0;
background: #fffddd;
}
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
img {
display: block;
max-width: 50%;
height: auto;
margin: 0 auto;
}
.alpha-target {
-webkit-mask-image: url("../img/cat.png");
-webkit-mask-mode: alpha;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 300px;
-webkit-mask-position: center center;
transition: -webkit-mask-size 0.3s;
&:hover {
-webkit-mask-size: 900px;
}
}
See the Pen BbdLvZ by hiroya iizuka (@hiroyaiizuka) on CodePen.
hover して動くようになりました。
❷.
keyframes も設定してみましょう。
.alpha-target {
・・・
transition: -webkit-mask-size 1s;
&:hover {
-webkit-mask-size: 300px;
animation: move 2s ease-out forwards;
}
}
@keyframes move {
100% {
transform: translateX(300px);
}
}
keyframes も設定できました。
ただし、背景の星空画像が固定されたままのため、いまいちな表現です。
-webkit-mask-position を移動させましょう。
.alpha-target {
-webkit-mask-position: left center; //left に変更
&:hover {
-webkit-mask-size: 300px;
animation: move 2s ease-out forwards;
}
}
@keyframes move {
100% {b
-webkit-mask-position: right center;
}
}
綺麗ですね！この表現は使えそうです。
mask はあまり知られていないプロパティですが、通常のCSS animation は使えそうです。
❸.
皆さんは、この鳥の存在を覚えておりますでしょうか？
See the Pen cute bird by hiroya iizuka (@hiroyaiizuka) on CodePen.
これは、SVGのスプライト画像を作って、step を使ってアニメーションを作ったものです。可愛いですね。
今回は、mask と、この stepテクニックを融合させます。
.alpha-target {
-webkit-mask-image: url("https://dl.dropbox.com/s/bb3namh3duwydsb/birds.png?dl=0");
-webkit-mask-mode: alpha;
-webkit-mask-repeat: no-repeat;
width: 162px;
height: 168.6px;
transition: -webkit-mask-size 1s;
&:hover {
animation: fly 2s steps(14) infinite;
}
}
@keyframes fly {
0% {
-webkit-mask-position: 0 0;
}
100% {
-webkit-mask-position: -2587px 0;
}
}
できました！笑
最後に、怪獣化します。
.alpha-target {
・・・
&:hover {
animation: fly 2s steps(14) infinite,
move 6s linear infinite;
}
}
@keyframes fly {
0% {
-webkit-mask-position: 0 0;
}
100% {
-webkit-mask-position: -2587px 0;
}
}
@keyframes move {
0% {
transform: translate(0) scale(1);
}
20% {
transform: translateY(0vh) translateX(-30vw) scale(1);
}
30% {
transform: translateY(4vh) translateX(-50vw) scale(1.5);
}
40% {
transform: translateY(2vh) translateX(-25vw) scale(2);
}
50% {
transform: translateY(0vh) translateX(0vw) scale(3);
}
60% {
transform: translateY(0vh) translateX(25vw) scale(5);
}
80% {
transform: translateY(0vh) translateX(30vw) scale(8);
}
100% {
transform: translateY(0vh) translateX(50vw) scale(10);
}
}
See the Pen Monster Dreaming Bird by hiroya iizuka (@hiroyaiizuka) on CodePen.
CSS は面白いですね〜
それでは、また明日〜