WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

徐々に早くなる回転アニメーション

f:id:mmmmofu:20160906192528p:plain

CSS3で徐々に早くなる回転アニメーションを作成する。

デモはこちら

http://efu.sakura.ne.jp/web/rotation/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>徐々に回転が早くなるアニメーション</title>
  <style>
  .gear {
    width: 200px;
    -webkit-animation: spin 4.3s cubic-bezier(1,0,.87,.62) infinite;
    animation: spin 4.3s cubic-bezier(1,0,.87,.62) infinite;
  }

  @-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(3000deg);}
  }

  @keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(3000deg);}
  }
  </style>
</head>
<body>
  <div class="gear"><img src="img/gear.png" alt=""></div>
</body>
</html>


「animation」の「animation-timing-function」の値を「cubic-bezier」で徐々に早くなるイージングを指定して
その間「rotate」で回転させる