CSSで回転させる
今回は、CSSのみで行うアニメーション効果(要素を回転)をご紹介いたします
sample
.spin_css { width: 100px; height: 100px; background: #2B958D; -webkit-animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite; -ms-animation: spin 2s linear infinite; -o-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);} } @-moz-keyframes spin { 0% {-moz-transform: rotate(0deg);} 100% {-moz-transform: rotate(360deg);} } @-ms-keyframes spin { 0% {-ms-transform: rotate(0deg);} 100% {-ms-transform: rotate(360deg);} } @-o-keyframes spin { 0% {-o-transform: rotate(0deg);} 100% {-o-transform: rotate(360deg);} } @keyframes spin { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
sample
背景・秒数などをを変更すれば、上記のようにも出来ます
以上、ホームページ制作の際は、試してみて下さい。
関連ニュース
・CSS3リファレンス.1
・CSS3リファレンス.2
・CSS3リファレンス.3
・CSSでアニメーション
・CSSで出来るブレンドモード