新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 CSSアニメーションを使ってみよう (02:51) 無料公開中
- 概要の説明
- index.htmlの作成
-
#02 transitionでアニメーションさせてみよう (02:58) 無料公開中
- transition-property
- transition-duration
-
#03 transformプロパティを使ってみよう (01:55) 無料公開中
- 移動
- 回転
- リサイズ
- 複数の変形
-
#04 transformで図形を変形させよう (03:00) 無料公開中
- transform: translate()
- transform: rotate()
- transform: scale()
-
#05 transform-originで動きの起点を変更しよう (01:55) 無料公開中
- transform-origin
-
#06 transition-propertyを使ってみよう (02:18)
- transition-property
- Chromeのバグの回避方法
-
#07 transitionの時間を制御しよう (01:43)
- transition-duration
- transition-delay
-
- transition-timing-function: ease
- transition-timing-function: ease-out
- transition-timing-function: ease-in-out
- transition-timing-function: linear
-
#09 デベロッパーツールで細かい調整をしよう (02:58)
- デベロッパーツールでの確認
- アニメーションの調整
-
#10 transitionの一括指定プロパティを使おう (01:56)
- transitionの一括指定プロパティ
- 時間に関する注意
-
#11 高度なアニメーションを設定しよう (01:54)
- animationとtransitionの違い
- animationの設定方法
-
#12 @keyframesを設定してみよう (02:09)
- @keyframes
- animation-name
- animation-duration
-
#13 アニメーションを細かく制御しよう (02:43)
- animation-delay
- animation-fill-mode
- animation-iteration-count
-
#14 再生順を制御してみよう (02:38)
- aniamtion-direction
- animation-timing-function
-
#15 animationの一括指定プロパティを使おう (01:25)
- animationの一括指定プロパティ
- 時間に関する注意
-
#16 ふわっと色が変わるボタンをつくろう (02:52)
- ボタンの作成
- transitionによる効果の設定
-
#17 回転するアイコンをつくろう (03:01)
- @keyframesの設定
- animationの設定
- 等速運動の設定
-
#18 ポップアップアニメーションをつくろう (02:30)
- div要素の配置
- スタイルの設定
-
#19 ポップアップアニメーションを動かそう (02:55)
- @keyframesの設定
- opacityプロパティの設定
- animation-timing-functionの設定
-
#20 ポップアップアニメーションを仕上げよう (02:21)
- button要素の配置
- pointer-eventsの設定
