CSSの「animationと@keyframes」を使って2画像のＹ軸回転で入替、画像内にテキストを表示するアニメーション

Stop / Start

ご訪問
ありがとう
ございます

2020-1-4 Retouch

2020-1-4 修正

補足説明

１．初期画面は全て画像で表示
　　回転後（裏）は、枠だけが画像で字はテキストデータ。

２．「Stop / Start 」のタグは、上部にしか設置出来ない。

３．幅や高さは、インラインＣＳＳで記述して下さい。
　　スタイルシートの記述では、反映されない。

４．画像は透過型だと回転したとき、裏になった画像やテキストの一部が裏映りする。

ＨＴＭＬ

<section class="anima_box_all" style="width:320px; height:250px;">
  <label for="toggle">Stop / Start </label>
  <input id="toggle" type="checkbox">
  <div class="wp_anima" style="height:210px; position:relative;">
    <div class="front">
      <img src="https:image/css_anima/anima1_front.gif" >
    </div>
    <div class="back">
      <img src="https:image/css_anima/frame_1.gif">
      <p class="txt1_style1">ご訪問<br>ありがとう<br>ございます</p>
      <p class="txt1_style2">2020-1-4 Retouch</p>
    </div>
  </div>
</secton>

<label for="toggle">Stop / Start </label>

</div>

<p class="txt1_style1">ご訪問<br>ありがとう<br>ございます</p>

<p class="txt1_style2">2020-1-4 Retouch</p>

</div>

</secton>

Line No
説明

1
チェック・ボックスとアニメ本体を含めた全体枠の指定。

2-3
Stop / Start チェック・ボックスの設定。

4-12
アニメーション本体の設置、相対配置の指定
5-7行目：最初に表示される画像の設置
8-12行目：２つ目に表示される画像とテキストの設置

13
アニメーション本体の終了タグ

ＣＳＳ

.anima_box_all input:checked+div{
  animation-play-state: paused;
}
.wp_anima {
  max-width:310px;
  animation: action_anima 12s linear infinite;
  transform-style: preserve-3d;
}
@keyframes action_anima {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
.front, .back {
  position: absolute;
  max-width:310px;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
}
.txt1_style1{
  position: absolute;
  top: 35px;
  text-align:center;
  line-height:1.5em;	
  letter-spacing:0.25em;
  font-size: 1.75em;
  font-weight: bold;
  color: #0000ff;
  width: 100%;}
.txt1_style2{
  position:absolute;
  top:155px;
  left:130px;
}

.anima_box_all input:checked+div{

animation-play-state: paused;

}

.wp_anima {

max-width:310px;

animation: action_anima 12s linear infinite;

transform-style: preserve-3d;

}

@keyframes action_anima {

0% { transform: rotateY(0deg); }

100% { transform: rotateY(360deg); }

}

.front, .back {

position: absolute;

max-width:310px;

top: 0;

left: 0;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

}

.back {

transform: rotateY(180deg);

}

.txt1_style1{

position: absolute;

top: 35px;

text-align:center;

line-height:1.5em;

letter-spacing:0.25em;

font-size: 1.75em;

font-weight: bold;

color: #0000ff;

width: 100%;}

.txt1_style2{

position:absolute;

top:155px;

left:130px;

}