富山のシステム開発・Web制作会社

CSSのanimationとkeyframeで画像をふわっと切り替える方法

こんにちは、satomiです。
フロントエンドエンジニアとしてMARBLEで働いています!

私はWeb制作会社でデザイナー兼コーダーをしていた経験はあるのですが、
ブランクがあり、CSSのanimationは使ったことがありませんでした。
今回サイトで使用するにあたり、苦戦したので、記録として残していきたいと思います!

やりたいこと

・画像を拡大させながらふわっと切り替える(スライドショー)

苦労したところ

・表示する秒数に対するkeyframeの0%〜100%の指定タイミング
・2枚目の画像を開始するタイミング

に悩みました。

完成したコードと動き

See the Pen animation by satomi (@satomi-chan) on CodePen.

解説

トータル10秒間で2枚の画像をスライドさせるので、
1枚目の画像を1〜5秒まで表示、2枚目の画像が開始する5秒目から透明にします。
また、透明になるタイミングでz-indexで2枚目の画像の上に来るよう指定します。

animationの指定

1枚目と2枚目の画像に指定
animation: anime 10s 0s infinite;
z-index: 0;
opacity: 0;

2枚目の画像に指定
animation-delay: 5s; ※5秒後に開始

keyframeの指定

@keyframes anime {
  0% { //開始
    opacity: 1;
  }
  50% { //5秒目の指定
    opacity: 1;
  }
  60% {  //6秒目の指定
    opacity: 0;
    transform: scale(1.2) ;
    z-index: 10;
  }
  100%{ //終了
    opacity: 0;
    transform: scale(1.2) ;
  }
}

開始から画像が透明になるまで拡大させつつ、
2枚目の画像が表示される5秒目から透明にしてふわっと切り替わるようにしています。

まとめ

たったのこれだけのことですが、指定したい秒数が何%になるのか、
消え始めるタイミングと次の画像を開始するタイミングを合わせるということに苦労しました。

これ以外も色々な動きを身につけていきたいと思います!

この記事を書いた人
宮野 聡美
Front-end Engineer

よく読まれている記事

世界中で話題になっている中国のスーパー豪雨の状況を現地からお届けます!

MARBLEメンバー紹介&インタビュー!第二弾は関東からIターンしてくれた小野寺さん

MARBLEメンバー紹介&インタビュー!第一弾は当社の最高技術責任者 宮野さん

中国はすでに夏日!今年も活気付き屋台の最新情報!!

中国のGW、労働節とは!?

中国山東省にもセブンイレブンがオープン!気になるクオリティーは!?

みんな大好きSEOについて

はじめまして、中国ライターの赤石章太郎です!

CSSのanimationとkeyframeで画像をふわっと切り替える方法

サブスクと定額制の違い説明できますか!?

関連記事

世界中で話題になっている中国のスーパー豪雨の状況を現地からお届けます!

MARBLEメンバー紹介&インタビュー!第二弾は関東からIターンしてくれた小野寺さん

MARBLEメンバー紹介&インタビュー!第一弾は当社の最高技術責任者 宮野さん