transition-timing-functiontransitionの変化速度を指定することができます。一定の速度で変化させたり、最初早く、最後遅くなどの速度を指定できます。指定出来る値は以下の用になっています。■速度デモそれぞれの速度を見てみましょう。今回はどれも3秒での変化指定です。cubic-bezierは(0,1,1,0)を指定。マウスをのせてね(:hoverで動作)easelinearease-inease-outease-in-outcubic-beziercubic-bezierで(0,1,1,0)を指定したら、なんだか奇妙な動きに(笑)transition-delaytransitionの変化が始まる時間を指定することができます。値が大きいほど、変化するまで時間がかかります。■遅延デモそれぞれの開始のタイミングの差を見てみましょう。今回も全部3秒での変化指定です。動作開始のタイミングが1秒ずつ違います。マウスをのせてね(:hoverで動作)0s1s2s3s4s5sまとめて記述ここまで説明したプロパティはまとめて記述することができます。durationの時間だけが記述してあればアニメーションします。0s;}現在のOperaだと角丸はアニメーションしないっぽいですね。DEMOプロパティごと記述まとめて記述の際で、プロパティごとに指定を分ける際は、プロパティごとにコンマで区切る必要があります。アニメーションさせたいプロパティとdurationの指定だけがあれば動作します。0s;}上のデモを見るとわかるのですが、プロパティごとにdelayを変えると、delayの時間ごとでプロパティの変化が変わります。同じ要素を記述した際は後ろに書いた内容で上書きされて前に記述した内容は動作しません。DEMO2いろいろ試していて気づいたこと今回いろいろ試していて気づいたんですけど、ブラウザによっては、アニメーションしない要素もいろいろあるようです。アニメーションしているかもしれないけど、あれ?って思うようなのも(z-indexとか)。Operaだと角丸がアニメーションしないっぽいですし。それとそれとFirefox4のプレビューを今回Windows版でみてみたのですが、アニメーション真っ最中って、マウスホイールでのスクロールってしないような...(気のせいだったらすみません)。それとまとめて書くショートハンド、これもうまく動かない?記述方法が悪いのかなあ...これは今後もチェックしてみます。試してみてこそわかるってのがありますね。今回はtransitionのみ試してみたのですが、次はもう一つのanimationをためしてみようと思います。[必須入力]※画像の中の文字を半角で入力してください。reserved.×この広告は180日以上新しい記事の投稿がないブログに表示されております。