sample5

animation:cycle1 25s linear infinite; サンプルは25sずつスライドが5枚切り替わるように設定しています 5枚の場合全部で100s スライドの動き全体から100sを100%で割ってアニメーションを設定します。 1枚目の場合25s(25%)の時点で2枚目に切り替わるのでその時点で200px下に動き非表示にする 2枚目の場合25s(25%)の時点で表示され50s(50%)の時点で3枚目に切り替わるのでその時点で200px下に動き非表示にするというようになります。枚数を変更する場合はこの計算を枚数に合わせて変更する必要があります。

.cp_cssslider04 ul < margin:0; padding:0; position:relative; >.cp_cssslider04 li < position:absolute; top:-200px; width:300px; height:200px; list-style:none; >.cp_cssslider04 li:nth-child(1) < animation:cycle1 25s linear infinite; >.cp_cssslider04 li:nth-child(2) < animation:cycle2 25s linear infinite; >.cp_cssslider04 li:nth-child(3) < animation:cycle3 25s linear infinite; >.cp_cssslider04 li:nth-child(4) < animation:cycle4 25s linear infinite; >.cp_cssslider04 li:nth-child(5) < animation:cycle5 25s linear infinite; >/* tooltip */ .cp_cssslider04 .tooltip < position:relative; bottom:95px; left:-300px; width:200px; height:auto; background:rgba(0,0,0,0.7); transition:all 0.3s ease-in-out; >.cp_cssslider04 .tooltip h1 < color:#fff; padding:0 0 0 20px; >.cp_cssslider04 li:hover .tooltip < left:0px; >.cp_cssslider04:hover li, .cp_cssslider04:hover .cp_progressbar < animation-play-state:paused; >/* PROGRESS BAR */ .cp_progressbar < position:relative; top:-5px; width:680px; height:5px; background:#000000; animation:progressbar 25s ease-out infinite; >/* ANIMATION */ @keyframes cycle1 < 0% < top:0px; >4% < top:0px; >16% < top:0px; opacity:1; z-index:0; >20% < top:200px; opacity:0; z-index:0; >21% < top:-200px; opacity:0; z-index:-1; >50% < top:-200px; opacity:0; z-index:-1; >92% < top:-200px; opacity:0; z-index:0; >96% < top:-200px; opacity:0; >100% < top:0px; opacity:1; >> @keyframes cycle2 < 0% < top:-200px; opacity:0; >16% < top:-200px; opacity:0; >20% < top:0px; opacity:1; >24% < top:0px; opacity:1; >36% < top:0px; opacity:1; z-index:0; >40% < top:200px; opacity:0; z-index:0; >41% < top:-200px; opacity:0; z-index:-1; >100% < top:-200px; opacity:0; z-index:-1; >> @keyframes cycle3 < 0% < top:-200px; opacity:0; >36% < top:-200px; opacity:0; >40% < top:0px; opacity:1; >44% < top:0px; opacity:1; >56% < top:0px; opacity:1; z-index:0; >60% < top:200px; opacity:0; z-index:0; >61% < top:-200px; opacity:0; z-index:-1; >100% < top:-200px; opacity:0; z-index:-1; >> @keyframes cycle4 < 0% < top:-200px; opacity:0; >56% < top:-200px; opacity:0; >60% < top:0px; opacity:1; >64% < top:0px; opacity:1; >76% < top:0px; opacity:1; z-index:0; >80% < top:200px; opacity:0; z-index:0; >81% < top:-200px; opacity:0; z-index:-1; >100% < top:-200px; opacity:0; z-index:-1; >> @keyframes cycle5 < 0% < top:-200px; opacity:0; >76% < top:-200px; opacity:0; >80% < top:0px; opacity:1; >84% < top:0px; opacity:1; >96% < top:0px; opacity:1; z-index:0; >100% < top:200px; opacity:0; z-index:0; >> /* ANIMATION BAR */ @keyframes progressbar < 0%, 20%, 40%, 60%, 80%, 100% < width:0%; opacity:0; z-index:2; >4%, 24%, 44%, 64%, 84% < width:0%; opacity:0.3; z-index:2; >16%, 36%, 56%, 76%, 96% < width:100%; opacity:0.3; z-index:2; >18%, 38%, 58%, 78%, 98% < width:100%; opacity:0; z-index:2; >> サムネイルをクリックしたら切り替わるスライド .cp_cssslider02 > img < position: absolute; left: 0; top: 0; transition: all 0.5s; border-radius: 3px; box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3); >.cp_cssslider02 input[name='cp_switch'] < display: none; >/* サムネイル */ .cp_cssslider02 label < margin: 15px 5px 0 5px; border: 2px solid #ffffff; display: inline-block; cursor: pointer; transition: all 0.5s ease; opacity: 0.6; border-radius: 3px; padding: 0; >.cp_cssslider02 label:hover < opacity: 0.9; >.cp_cssslider02 label img < display: block; width: 40px; border-radius: 2px; >.cp_cssslider02 input[name='cp_switch']:checked + label < border: 2px solid #FF7043; opacity: 1; >.cp_cssslider02 input[name='cp_switch'] ~ img < opacity: 0; >.cp_cssslider02 input[name='cp_switch']:checked + label + img

copypet.jp

こんな記事はいかがですか？ category Link スポンサー免責事項

📎📎📎📎📎📎📎📎📎📎