コピペ一発！CSSにてアニメーションを簡単に実装：WAIT! Animate

WEB制作にて、アニメーションを簡単に実装できるツールのご紹介です。

CSSにコードをコピペするだけでヌルヌルと動きます。

実装は簡単

まず、こちらのサイトに行きます。

＊WAIT! Animate

いろいろな効果のアニメーションが並んでます。

その中から良さげなものを選んで、「Wait time」でアニメーションの発動間隔を決めます（秒数）。

プレビューを見ながら調整しましょう。

で、表示されたコードをコピペします。

コードをCSSに貼り付けて、クラス名を動かしたい画像などに適用させます。

たとえば「WRENCH」という効果の場合は、

Html

<img src="images/0-32.png" alt="" class="wrench">

CSS

.wrench {
  animation: wrench_7909 3.875s ease infinite;
  transform-origin: 90% 35%;
}

@keyframes wrench_7909 {
  0% { transform:rotate(-12deg) }
  5.16129% { transform:rotate(12deg) }
  6.45161% { transform:rotate(24deg) }
  11.6129% { transform:rotate(-24deg) }
  12.90323% { transform:rotate(-24deg) }
  18.06451% { transform:rotate(24deg) }
  19.35484% { transform:rotate(24deg) }
  24.51613% { transform:rotate(-24deg) }
  25.80645% { transform:rotate(-24deg) }
  30.96774% { transform:rotate(24deg) }
  32.25807% { transform:rotate(24deg) }
  37.41935% { transform:rotate(-24deg) }
  38.70968% { transform:rotate(-24deg) }
  43.87097% { transform:rotate(24deg) }
  48.3871% { transform:rotate(0deg) }
  100% { transform:rotate(0deg) }
}