animation

@keyframes

position

opacity

object-fit

:nth-child()

.slide-list {
  position: relative;
  width: 400px;
  height: 260px;
}

.slide-item {
  /* 問題1. スライドアイテム要素にスタイルを追加してください */
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation-name: slider;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.slide-item:nth-child(1) {
  animation-delay: 0s;
}

/* 問題2. 二つ目以降のスライドアイテム要素に、アニメーションの開始時間を指定してください */
.slide-item:nth-child(2) {
  animation-delay: 5s;
}

.slide-item:nth-child(3) {
  animation-delay: 10s;
}

.slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes slider {
  0% {
    opacity: 0;
  }
  /* 問題3. アニメーションの変化の指定を追加してください */
  15% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


.slide-list {
  position: relative;
  width: 400px;
  height: 260px;
}

.slide-item {
  /* 問題1. スライドアイテム要素にスタイルを追加してください */
}
.slide-item:nth-child(1) {
  animation-delay: 0s;
}
/* 問題2. 2個目以降の.slider-itemに、アニメーションの開始時間を指定してください */

.slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes slider {
  0% {
    opacity: 0;
  }
  /* 問題3. アニメーションの変化の指定を追加してください */
}


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

transform

transition

cursor

:hover

ホバーでボタンを変化

ホバーでボックスを移動

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

background

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

流れる背景を作成

演習問題

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


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