お知らせ

***** テスト編集中 *****

<section class="kn_anima_box" style="float: right;
                width: 210px; text-align: center;">
  <label for="toggle">停止・再開&nbsp;&nbsp;</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%;">ご訪問&nbsp;感謝 !
      </p>
    </div>
  </div>
</section>
NC3ロゴ

訪問感謝

ご訪問 感謝 !

 
.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;
}