ログイン

問題9 スライダーをcssだけで作ろう!

CSSAnimationの問題

CSSAnimation

スライダーをcssだけで作ろう!

問題

今回は簡単なスライダーをcssだけで作ってみましょう!

自分の環境に書くコード

              <div class="slider">
  <div class="content">1</div>
  <div class="content">2</div>
</div>
¥HTML¥
            
              .slider{
  width: 300px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
.content{
  position: absolute;
  width: inherit;
  height: inherit;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 100px;
  text-align: center;
  font-size: 3em;
}
.content:first-of-type{
  background-color: cadetblue;
}
.content:last-of-type{
  background-color: aqua;
}
¥CSS¥
            

期待する画面

コードのアイコン

解答ソースコード

              .content{
  animation: slide 8s infinite;
  -webkit-animation: slide 8s infinite;
}
@keyframes slide {
  0% {left: 100%}
  5% {left: 0}
  50% {left: 0}
  55% {left: -100%}
  100% {left: -100%}
}
¥CSS¥
            
答えのアイコン

解説

最初の0〜5%で右からフェードイン、50〜55%で左へフェードアウトさせます。そして、片方にアニメーションにかかる時間の半分だけの時間をanimation-delayで遅らせます。以上で1番簡単なスライダーの完成です。
ログインして解答を見る
完了にする!
LINEの友達追加でお役立ち動画をGET!!