ログイン
問題9

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

アイコン画像

問題9:スライダーを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;
}
.content:last-of-type{
  animation-delay: 4s;
  left: 100%;
}
@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番簡単なスライダーの完成です。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
CSSAnimationを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる