ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/02/02
NEW
週刊ドットインストール(2023/02/02号)を更新しました!
PREMIUM
詳解CSS アニメーション編
CSSで要素をアニメーションさせる手法について見ていきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
詳解HTML 基本タグ編
(全27回)
PREMIUM
PREMIUM
0%
詳解CSS 基本スタイリング編
(全27回)
PREMIUM
PREMIUM
0%
詳解CSS 応用スタイリング編
(全27回)
PREMIUM
PREMIUM
0%
詳解CSS セレクター編
(全21回)
PREMIUM
PREMIUM
0%
詳解CSS メディアクエリー編
(全14回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(19)
未完了
#01 学習の準備を整えよう
(02:41)
無料公開中
作業用フォルダの設定
index.htmlの作成
style.cssの作成
未完了
#02 シンプルなアニメーションを作ってみよう
(02:45)
無料公開中
.boxのスタイリング
transition-property
transition-duration
書く位置に関する注意点
未完了
#03 transformプロパティを使ってみよう
(02:02)
無料公開中
transitionに対応しているプロパティ
transform
transformに関する注意点
XY軸の説明
未完了
#04 translate()、rotate()、scale()を使ってみよう
(02:59)
無料公開中
translate() / translateX() / translateY()
rotate()
scale() / scaleX() / scaleY()
未完了
#05 transform-originで変形の基点を操作しよう
(02:19)
transform-origin
未完了
#06 変形を組み合わせてみよう
(02:43)
変形の組み合わせ
変形を組み合わせた際の注意点
未完了
#07 transition-delayを使ってみよう
(01:52)
transition-delay
時間の単位(s, ms)
未完了
#08 transition-timing-functionを使ってみよう
(02:37)
transition-timing-function
動作確認
未完了
#09 transitionの一括指定プロパティを使おう
(02:42)
transition
時間を表す値に関する注意点
transition-propertyに関する注意点
未完了
#10 複数のプロパティに対応させよう
(01:47)
border-radiusの追加
transitionの設定
未完了
#11 より複雑なアニメーションを作ってみよう
(02:21)
transitionのデメリット
animation-name
animation-duration
animation-iteration-count
@keyframes
未完了
#12 @keyframeを設定していこう
(02:48)
キーフレームの設定
設定時の注意点
未完了
#13 animation関連のプロパティを見ていこう
(02:40)
animation-delay
animation-direction
animation
未完了
#14 ふわっと色が変わるボタンを作ろう
(02:11)
buttonのスタイリング
transitionの設定
未完了
#15 ローディングアイコンを作ってみよう
(02:43)
divのスタイリング
animationの設定
未完了
#16 ポップアップメッセージを作っていこう
(02:19)
divのスタイリング
positionによる位置指定
animationの設定
未完了
#17 ポップアップメッセージを動かそう
(02:39)
@keyframesの設定
animation-fill-mode
opacity
未完了
#18 ポップアップメッセージを完成させよう
(02:12)
ボタンがあった場合の問題
pointer-events
未完了
#19 次のステップを確認しよう
(01:41)
ここまでのまとめ
次のステップ
256timesの紹介
次におすすめのレッスン
実践!ポートフォリオサイトを模写しよう
(全18回)
PREMIUM
PREMIUM
0%
ギャラリー
このレッスンについて
最終更新日
2022年12月27日
バージョン情報
Chrome 108 / Visual Studio Code 1.74.2
関連キーワード
(5)
基礎講座
(360)
初心者向け
(359)
HTML
(110)
CSS
(111)
Web制作
(17)
このレッスンを共有する