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);}
}