お知らせ
***** テスト編集中 *****
<section class="kn_anima_box" style="float: right; width: 210px; text-align: center;"> <label for="toggle">停止・再開 </label> <input id="toggle" type="checkbox" /> <div class="img_anima_nc3_logo_front_back"> <div class="img_anima_nc3_logo_back"> <img title="*" src="url" alt="*" 以降・略 /> <p style="position: absolute; top: 5px; left: 7px; font-size: 1.25em; color: blue;">★</p> </div> <div class="img_anima_nc3_logo_front"> <img title="*" src="url" alt="*" 以降・略 /> <p style="position: absolute; top: 260px; text-align: center; font-size: 1.75em; font-weight: bold; color: blue; width: 100%;">ご訪問 感謝 ! </p> </div> </div> </section>
★
ご訪問 感謝 !
.img_anima_nc3_logo_front_back { width:205px; height:350px; animation: img_anima_nc3_logo_front_back 8s linear infinite; transform-style: preserve-3d; animation-delay: 1.5s; /* animation-iteration-count: 5; */ } @keyframes img_anima_nc3_logo_front_back { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .img_anima_nc3_logo_front, .img_anima_nc3_logo_back { position: absolute; top: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .img_anima_nc3_logo_front { transform: rotateY(180deg); } .img_anima_nc3_logo_front_back:hover { animation-play-state: paused; } .kn_anima_box input:checked+div{ animation-play-state: paused; }