0

私は CSS3 変換とキーフレーム アニメーションに比較的慣れていないので、CSS ジェネレーターに固執するか、他の例をリッピングする傾向があります。ここに示す例を自分の目的のために変更しましたが、これは Chrome ではうまく機能しますが、FF や IE では機能しません - http://webbb.be/blog/making-a-swinging-effect-with-css3-animations/。

以下の私の例を参照してください (js フィドルが含まれています)。本質的に、これはパースペクティブを使用したホバーのスイング効果ですが、パースペクティブは FF と IE では機能しないようです..以下の例に -moz-pre 修正のみを追加しました... 何か案は？

a  {  display: block;
float:left;
text-indent: -999px;
overflow: hidden;
height: 100px;
width: 100px;
background: red;
cursor: pointer;

}

.perspective { 
position: relative; 
-webkit-perspective: 350;
-moz-perspective: 350;
width: 100px;
height: 100px;
}

.perspective .swing {
position: relative; 
z-index:1;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
}

a.swing:hover {
-webkit-transform-origin: top;
-moz-transform-origin: top;
-webkit-animation: balance 1.5s ease-in-out 110ms 1 alternate;
-moz-animation: balance 1.5s ease-in-out 110ms 1 alternate;
}


@-webkit-keyframes balance { 
25% { -webkit-transform: rotateX(-60deg); }  
45% { -webkit-transform: rotateX(50deg); } 
69% { -webkit-transform: rotateX(-30deg); } 
90% { -webkit-transform: rotateX(30deg); } 
100% { -webkit-transform: rotateX(0deg);} 
}


@-moz-keyframes balance { 
25% { -moz-transform: rotateX(-60deg); }  
45% { -moz-transform: rotateX(50deg); } 
69% { -moz-transform: rotateX(-30deg); } 
90% { -moz-transform: rotateX(30deg); } 
100% { -moz-transform: rotateX(0deg);} 
}

http://jsfiddle.net/7ejF7/1/

4

2 に答える 2

0

none-webkit-または-moz-browsers のステートメントを追加してみてください。
私はそれを試していませんが、それは解決策になる可能性があります。

transform-origin: top;
animation: balance 1.5s ease-in-out 110ms 1 alternate;


@keyframes balance { 
     25% { transform: rotateX(-60deg);}  
     45% { transform: rotateX(50deg); } 
     69% { transform: rotateX(-30deg); } 
     90% { transform: rotateX(30deg); } 
     100% { transform: rotateX(0deg);} 
}

TJL

于 2013-07-30T13:59:34.170 に答える
0

Webkit 以外のブラウザーでパースペクティブを機能させるには、px 値を追加する必要があります。

-moz-perspective: 350px;

http://jsfiddle.net/mZMGd/

于 2013-08-11T05:06:28.440 に答える