ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2025/08/28
NEW
【週刊ドットインストール】 Figma入門を制作中、256timesの新クラスを企画中
PREMIUM
【旧版】詳解CSS アニメーション編
CSSでさまざまなアニメーションをつくる方法について見ていきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
CSS入門 アニメーション編
CSSで要素をアニメーションさせる手法について見ていきます。
0%
動画レッスン一覧
(9)
質問と回答
(9)
#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
未完了
#04 クリックして要素を動かそう
矢印マークの入力方法について
2022年1月27日
即時関数?
2022年1月27日
クリックしても要素が動かないのですが...
2022年1月27日
.movedは定義されていないのでは?
2022年1月27日
cssのmovedって何?
2022年1月27日
この動画はJavaScript使いますが...
2022年1月27日
これはジャバスクリプトを学んでないと進めないでしょうか?
2022年1月27日
#09 アニメーションの挙動を制御しよう
詳解CSS アニメーション編について
2022年1月27日
アニメーションの挙動がわかりません
2022年1月27日
リリース情報(note)
『CSSアニメーション入門』を追加しました
詳細情報
最終更新日
2018年9月13日
バージョン情報
HTML5 / CSS / JavaScript