詳解CSS アニメーション編
(全9回)
CSSでさまざまなアニメーションをつくる方法について見ていきます。
このレッスンでは HTML5 / CSS / JavaScript を使用しています。
-
#01 CSSアニメーションを使ってみよう (02:29) 無料公開中
- CSSアニメーションの例
- index.htmlの作成
-
#02 transformで要素を変形させよう (02:46) 無料公開中
- translate()
- rotate()
- scale()
- transform-origin
-
#03 transitionでアニメーションさせよう (02:55)
- transition-property
- transition-duration
- 一括指定プロパティ
-
#04 クリックして要素を動かそう (02:14)
- 要素の追加
- クリックイベントの実装
- 動作確認
-
#05 アニメーションに変化をつけよう (02:15)
- ease
- ease-out
- ease-in-out
-
#06 アニメーションを調整してみよう (01:45)
- Chromeのデベロッパーツール
- cubic-bezier()
-
#07 より複雑なアニメーションを作ろう (02:17)
- @keyframes
- animation-name
- animation-duration
- animation-iteration-count
-
#08 @keyframesを追加してみよう (02:04)
- @keyframesの追加
-
#09 アニメーションの挙動を制御しよう (02:43)
- animation-direction
- animation-fill-mode
