葉っぱが下から上へ向かって色が塗られるアニメーションを作った
こんにちは。CSS のお時間がやってきました。
アニメーション
アニメーションによってユーザへリアクションを示せ、動きのあるアプリケーションとして魅せることができます。
完成物
デモ
実際にアニメーションのデモンストレーションページを用意しました。
↑よりぜひアクセスしてください。
ソースコード
にてアニメーションの全容を掲載しています。ご自由にお使いください。使う際にDelete HereとHeadのメタさえ消せば直ぐに利用可能です。
何を作るか
タイトルの通り、「葉っぱが下から上へ向かって色が塗られるアニメーション」です。
予め薄い塗りをした同じシェイプを配置します。
次にキャンバスサイズの四角を作ります。その四角で緑色のグラデーション済みの葉をマスキングします。
葉っぱの定義とマスク
<style>
.svg_leaf_over {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
row-gap: 3rem;
}
.svg_x5F_leaf_path {
fill: url(#svg_x5F_leaf_g);
mask: url(#mask1);
}
#svg_x5F_leaf_g stop:first-child {
stop-color: #00c74c;
}
#svg_x5F_leaf_g stop:last-child {
stop-color: #00eba4;
}
</style>
<svg id="svg_x5F_leaf" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 747.35 877.82">
<defs>
<!-- Linear Gradient -->
<linearGradient id="svg_x5F_leaf_g" x1="373.68" y1="797.98" x2="373.68" y2="42.05"
gradientUnits="userSpaceOnUse">
<stop offset="0" />
<stop offset="1" />
</linearGradient>
<!-- Mask -->
<mask id="mask1">
<rect x="0" y="877.82" width="747.35" height="877.82" />
</mask>
</defs>
<path class="svg_leaf_mask"
d="" />
<path class="svg_x5F_leaf_path"
d="" />
</svg>
あとはアニメーションを付加することで完了です。アニメーションはcubic-bezier(0.7, 0, 0.84, 0)
のほうがliner
よりも効果的と考えました。一瞬膨らんだりするアニメーションも付けています。
葉っぱのスタイルとアニメーション
svg#svg_x5F_leaf {
position: relative;
width: min(40%, 15rem);
animation: leaf_completed .4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
animation-delay: 1.2s;
}
.svg_leaf_mask {
fill: #ececec;
animation: leaf_back_spawning .15s linear forwards;
}
#mask1 rect {
fill: white;
animation: maskAnimation 1.2s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}
@keyframes leaf_completed {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}
@keyframes leaf_back_spawning {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes maskAnimation {
from {
y: 877.82px;
}
to {
y: 0;
}
}
@keyframes spinningBox {
0% {
opacity: 0;
transform: scale(0) rotate(0deg);
}
10% {
opacity: 1;
transform: scale(1.1) rotate(36deg);
}
20% {
transform: scale(1.1) rotate(72deg);
}
85% {
transform: scale(1) rotate(306deg);
}
100% {
transform: scale(0) rotate(360deg);
}
}
さらに、「COMPLETE」のような文字をJavaScriptでタイミングを制御することでアニメーションとして最後に表示できます。
完了メッセージのスタイル
.leaf_complete_message {
font-size: 1.35rem;
letter-spacing: .15rem;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
animation: leaf_completed_mes_open .3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
animation-delay: 1.45s;
color: #00c74c;
}
@keyframes leaf_completed_mes_open {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
テキストのHTML要素
<div class="leaf_complete_message">COMPLETED</div>
JavaScriptでleaf_complete_message
のクラスさえ追加すれば簡単に実現可能ですね。
完成
アニメーションがあるとないとでかなり印象が変わりますよね。
コメント
自動更新
コメントはまだありません
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.