*

ウェッブ制作・パソコン

Width =px

ホーム > 変化を付ける小技 >
CSSアニメーション @keyframes MENU 

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

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

2020-1-4 Retouch

補足説明

1.初期画面は全て画像で表示
  回転後(裏)は、枠だけが画像で字はテキストデータ。

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

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

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

HTML

  • Line No
  • 説明 
  • 1
  • チェック・ボックスとアニメ本体を含めた全体枠の指定。 
  • 2-3
  • Stop / Start チェック・ボックスの設定。
  • 4-12
  • アニメーション本体の設置、相対配置の指定
    5-7行目:最初に表示される画像の設置
    8-12行目:2つ目に表示される画像とテキストの設置 
  • 13
  • アニメーション本体の終了タグ

CSS