「 アニメーション 」一覧

インタラクティブなWebサービスだとユーザーの入力内容や操作が間違っていた場合、ボタンを押すとガタガタ震えるような演出をしているところがあります。あのような演出はCSS3のアニメーションプロパティとjQueryなどのスクリプトを組み合わせると実現できます。ここではクリック時にボタンがガタガタ震えるアニメーション効果をつける方法について解説します。

要素にフェードインなどのアニメ効果をつけながら表示するには２つ方法があります。１つめはjQueryのアニメ関数を使う方法で、２つめはCSSでアニメーションプロパティを使う方法です。それぞれの方法に長所や短所があるので使い分けた方がいいです。ここではこの２つのやり方で要素をアニメ表示する方法を解説します。

何か動作があった時にただ要素を表示するだけでなく回転や拡大などのアニメーション効果をつけるとユーザーに興味を持ってもらいやすくなります。ここではCSSのtransformプロパティとjQueryのcss関数を使って要素に変形効果をつけ、ユニークなアニメ表示をする方法と実際のアニメ表示の例について紹介します。