作成:2017/08/28更新:2019/01/29Web制作CSSだけで動く「ズームインとズームアウトをフェードしながら交互に繰り返すCSSスライダー」です。Link作成したデモはこちら。交互にズームインとズームアウトを繰り返し表示しています。COMPILED」を押してください。追記:IEでカクつく場合は、以下をliに追加するか、@keyframesにwidth幅をpxで指定してください。PeonyQueenで作成されているスライダー。上記のスライダーがとてもよく出来ていてCSSのアニメーションで時間差をつけてスライドを切り替え、フェードインを繰り返すようになっています。CSSなので読み込みや動作も早く扱いやすいです。こちらを参考に、htmlのimg記述をなくし、フェードインとフェードアウトを繰り返すようにカスタマイズさせていただきました。5枚の画像を切替えるバージョンです。htmlの記述はこれだけ。}}画像はCSS背景に設定し、偶数と奇数の画像によって、ズームインとズームアウトのアニメーションを割り当てます。ズームインだけ適用したい場合は、animation-nameの箇所を、どちらもslider-zoominにしてください。ズームアウトの場合はslider-zoomoutですね。1枚8秒(5枚の画像×8秒)で計算するので、アニメーション周期(animation-duration)は40秒で設定します。1枚目以外は透過させ、表示から開始させるので-3秒からスタートし8秒づつ加算してアニメーション開始時間をずらします(animation-delay)。37※1枚目は-3秒から開始し、2枚目は8秒後の5秒から開始するという意味。アニメーションは40秒間のうち5~8秒の間だけ透過解除したいので12.5%(5×100/40=12.5)と20%(8×100/40=20)にopacity:1を設定。秒数をdurationで割ります。分かりにくいので表を作りました。以下の表だと、5枚の時は12.5~20%、4枚の時は15.63~25%にopacity:1を指定すればよいということになります。CSSスライダーでした。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2014/12/8綺麗な動きになった!Web制作前に見ておきたいjQueryプラグインまとめ比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそう2016/08/29それとなく今風にできる、グローバルナビゲーションのコード集Webサイト全ページのヘッダーかサイドバーに共通して設置される、今時のグローバルナビゲーションをピックアップしました。洗練された見え方にしたい時に。グロ2014/08/4メモしておきたい!サイト制作時に知っておくと「意外」と役に立つこと今回はサイト制作において毎回使うこと、意外と面倒で忘れがちなものをメモしておきます。事前に知っておくことで効率的にコーディング、納品できると思います。ドメイン2015/02/9何を使えばよいか分かった!コーポレートサイトの各ページを制作する前にみておきたいこと企業サイトはサービスや商品の他、ビジョンやIR情報などで構成されています。コメントデータの処理方法の詳細はこちらをご覧ください。