CSSでふわふわと回転演出

CSSでふわふわと回転演出を実装してみた。

.fuwafuwa_img {
 -webkit-animation-name:fuwafuwa;
 -webkit-animation-duration:2s;
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-timing-function:ease;
 
 -moz-animation-name:fuwafuwa;
 -moz-animation-duration:2s;
 -moz-animation-iteration-count:infinite;
 -moz-animation-timing-function:ease;
}
.guruguru_img {
 -webkit-animation-name:guruguru;
 -webkit-animation-duration:40s;
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-timing-function:ease;
 
 -webkit-animation-name:guruguru;
 -webkit-animation-duration:20s;
 -moz-animation-iteration-count:infinite;
 -moz-animation-timing-function:ease;
}
/* ふわふわアニメーション */
@-webkit-keyframes fuwafuwa {
 0% {-webkit-transform:translate(0, 0);}
 50% {-webkit-transform:translate(0, -10px);}
 100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
 0% {-moz-transform:translate(0, 0);}
 50% {-moz-transform:translate(0, -10px);}
 100% {-moz-transform:translate(0, 0);}
}
/* 回転アニメーション */
@-webkit-keyframes guruguru {
 0% {-webkit-transform:rotate(0deg);}
 100% {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes guruguru {
 0% {-moz-transform:rotate(0deg);}
 100% {-moz-transform:rotate(360deg);}
}

参考サイト
https://www.softel.co.jp/blogs/tech/archives/4080