プロジェクトのスライドショー プラグインを開発しようとしていますが、CSS3 アニメーション/トランジションで問題が発生しています。
ここで表示できます: http://jsfiddle.net/75Sjb/
私がやろうとしていること
各スライドには と の両方が
transform: translate3d(-100%,0,0)ありtransition: allます。このように、アクティブでないスライドはビューのすぐ外側の左側にあり、スムーズに移動する準備ができています。アクティブなスライドには、from 部分が であるアニメーションと
transform: translate3d(100%,0,0)、CSS の新しい変換プロパティが もありtranslate3d(0,0,0)ます。そのため、それらはビューにぴったりと収まるようにアニメーション化されます。
問題
Webkit で
最初にスライドを選択するときは適切にアニメーション化されますが、その後はすべて失敗します。アクティブから非アクティブに移行するスライドはアニメーション化されません。
Firefox の場合
Firefox では、アクティブから非アクティブへのスライドは問題ありません。しかし、アクティブなスライドは左からスライドインします (アニメーションが機能していません)。