Webデザインを彩るCSSアニメーション。実装時にはデザインのイメージに合わせて、細かな調整を加えたり、なかなかに手間がかかる箇所でもあります。そんな手間がかかる調整工程を省ける、ブラウザ上でアニメーションが作れるツール「animista」を今回は紹介したいと思います。 ブラウザ上でプレビューしながら細かな動きを調整して、タグをコピペするだけでCSSアニメーションが実装できる便利なツールです。 詳しくは以下 拡大や縮小、スウィングなどの18種類ものアニメーションの雛形から、オプションで数値を変更してアニメーションを細かにカスタマイズすることができます。オプションではアニメーションのスピードだけでなく、ディレイや回転回数など、細かな場所まで弄ることが可能。面倒だった細かな調整作業を、ブラウザ上でプレビューを見ながらできるので、効率的に仕事をこなすことができます。スムーズなアニメーション実装で
![プレビューで簡単!CSSアニメーションがブラウザ上で作れる「animista」](https://cdn-ak-scissors.b.st-hatena.com/image/square/ca8f5e47edc9f3460dba6832ecc5a35ffc5fdc5d/height=288;version=1;width=512/https%3A%2F%2Fdesign-develop.net%2Fwp-content%2Fuploads%2F2017%2F03%2FIvvuhLKOlVsmlb12ajwABAssUEEguU9u2CBAgQIAAAQIECBAgQIAAAQIECKy5gEByzRuA3SdAgAABAgQIECBAgAABAgQIECCwTAGB5DK1bYsAAQIECBAgQIAAAQIECBAgQIDAmgsIJNe8Adh9AgQIECBAgAABAgQIECBAgAABAssUEEguU9u2CBAgQIAAAQIECBAgQIAAAQIECKy5gEByzRuA3SdAgAABAgQIECBAgAABAgQIECCwTAGB5.png)