transform

transition

cursor

:hover

.button {
  display: block;
  width: 200px;
  margin: 40px;
  padding: 8px 24px;
  border-width: 1px;
  border-style: solid;
  border-color: #87cefa;
  color: #87cefa;
  text-align: center;
  border-radius: 24px;
  /* 問題1. ボタン要素にスタイルを追加してください */
  cursor: pointer;
  transition-duration: 0.3s;
}

/* 問題2. 一つ目のボタン要素をホバーした際のスタイルを指定してください */
.button1:hover {
  background-color: #87cefa;
  color: #ffffff;
}

/* 問題3. 二つ目のボタン要素をホバーした際のスタイルを指定してください */
.button2:hover {
  transform: scale(1.2);
}


.button {
  display: block;
  width: 200px;
  margin: 40px;
  padding: 8px 24px;
  border-width: 1px;
  border-style: solid;
  border-color: #87cefa;
  color: #87cefa;
  text-align: center;
  border-radius: 24px;
  /* 問題1. ボタン要素にスタイルを追加してください */
}

/* 問題2. 一つ目のボタン要素をホバーした際のスタイルを指定してください */

/* 問題3. 二つ目のボタン要素をホバーした際のスタイルを指定してください */


ホバーでボタンを変化

ホバーでボックスを移動

アニメーションをカスタマイズ

animation

@keyframes

position

opacity

object-fit

:nth-child()

ふわっと切り替わるスライドショーの作成

background

.bg-test {
  background-image: url('./img/test.jpg');
  $(1): $(2);
}

流れる背景を作成

演習問題

CSSを使用してなアニメーションが実装可能です。
transformやanimationプロパティの活用で、簡単なアニメーションを実装します。


0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

Web制作コース

【応用編📚】高度なCSSテクニックを習得しよう

「CSSで簡単なアニメーションを実装しよう」レッスンの総復習クイズです。