実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ

あなたを優しく、包みたい。 茂った木の葉の間から漏れてさす日の光のように・・・ チョヌン、茂吉イムニダ。 前回はvelocity.jsのオプション機能についてご紹介しました。 velocity.jsは普段からjQueryに触れている方にとっては理解しやすく、アニメーションの滑らかさや実行速度の軽快さなどのメリットを感じてもらえたのではないでしょうか。 今回はCSSアニメーションのイージングとdurationについて書いていきたいと思います。 「イージングの値はだいたい”ease”です。」「durationは大抵同じ値です。」という方、気軽にご一読ください。 いつもの実装に少し手間を加えるだけで、サイトの印象をグッと良くする方法を紹介したいと思います。 CSSアニメーションを実装するためのtransitionプロパティ transitionプロパティは、transition効果（時間的変化）