【CSS】ハートアイコンのCSSアニメーション（鼓動・バウンドなど）

2018年5月18日2019年6月12日CSS,CSSアニメーション

何かと使われるハートアイコン

そんなハートアイコンを使ったCSSアニメーションをできるだけシンプルに作ってみます

今回、ハートアイコンは「Font Awesome」を利用しています

Font AwesomeのCDNファイル

Font AwesomeはWordPressの多くのテーマで利用されているCSSアイコンファミリーです

CDNもあるので簡単に使う事が可能です

https://use.fontawesome.com/releases/v5.0.13/css/all.css

ハートのCSSアニメーションサンプル

See the Pen CSS Heart Animations by yochans (@yochans) on CodePen.

HTML

<div class="items">
<i class="Heart1 fas fa-heart"></i>
<i class="Heart2 fas fa-heart"></i>
<i class="Heart3 fas fa-heart"></i>
<i class="Heart4 fas fa-heart"></i>
<i class="Heart5 fas fa-heart"></i>
<i class="Heart6 fas fa-heart"></i>
</div>

ハートが鼓動するCSSアニメーション

.Heart1{
  animation: anime1 3s reverse infinite;
}

@keyframes anime1{
0% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.3); }
80% { transform: scale(1); }
90% { transform: scale(1.3); }
100% { transform: scale(1); }
}

ハートが膨らむCSSアニメーション

.Heart2{
  animation: anime2 1s alternate infinite;
}

@keyframes anime2{
0% { transform: scale(0.2); }
100% { transform: scale(1); }
}

ハートがバウンドするCSSアニメーション

.Heart3{
  animation: anime3 0.2s alternate infinite;
}

@keyframes anime3{
  0% {transform: translateY(0px);}
  100% {transform: translateY(-10px);}
}

ハートが回転するCSSアニメーション

.Heart4{
  animation: anime4 1.5s alternate infinite;
}

@keyframes anime4{
  0% {transform: rotateY(0deg);}
  100% {transform: rotateY(360deg);}
}

ハートの色が変化するCSSアニメーション

.Heart5{
  animation: anime5 1.5s alternate infinite;
}

@keyframes anime5{
  0% {color:#FF5252;}
  100% {color:#40C4FF;}
}

ハートの色が変化するCSSアニメーション2

.Heart6{
  animation: anime6 2s alternate infinite;
}

@keyframes anime6{
  0% {color:#FF5252;}
  20% {color:#EEFF41;}
  40% {color:#FF9E80;}
  60% {color:#FF9100;}
  80% {color:#00E676;}
  100% {color:#40C4FF;}
}