[WordPress] ロード時に CSS イメージフ リップ

スポンサーリンク

Question

これに困惑し、望んで誰かが助けることができます

私は HTML で行われ、クライアントの Instagram の写真を披露するページ背景があります。このプラグインを使用して: justifiedgrid.com

クライアント本当にページ フリップを画像のような荷を積み込むだろうこの http://www.starworksartists.com/hair/adir-abergel/instagram/ のような

イメージに CSS を追加することを試みたがよう

.jig-loaded  img {
    transition: 0s cubic-bezier(0.175, 0.885, 0.32, 1.1) !important;
    transform: rotateY(0deg) translateX(0px) !important;
    opacity: 1;
}

が動作していないようです

任意の助けをいただければ幸いです

答え

css キーフレーム アニメーションを使用することができる:

 
img {
  -webkit-animation: flip 1s;
  animation: flip 1s;
}
@-webkit-keyframes flip {
  from {
    transform: rotateY(90deg)
  }
  to {
    transform: rotateY(0deg)
  }
}
@keyframes flip {
  from {
    transform: rotateY(90deg)
  }
  to {
    transform: rotateY(0deg)
  }
}
 

答え

変換されたバージョンをイメージの初期状態を設定、同様に、それを

transition

を適用し java スクリプトの設定を使用してトランス フォームを設定するクラス (変換されません)「通常の」の状態に戻すを追加これを行う最善の方法になる

簡単状態およびあなたを追跡するこの方法は、ないのジャンプの間に 2 つの状態を切り替えることができます。 デモ(デモ - で、

onload

が JSFiddle を担当する必要があります自分で、コードの追加)

それ以外の場合

animation-direction:forwards

とのロード キーフレーム アニメーションを使用することができるが非変形状態に変換された状態から行く。すべてをやっているが、最初のページの読み込みに影響を及ぼす場合、罰金ですがいずれかを使用する場合よりインタラクティブなべきである

transition

s 代わりに使用する

http://stackoverflow.com/questions/27259259/css-image-flip-on-load

スポンサーリンク

Leave a Reply