animation - CSS3アニメーションステップにトランジションを追加する方法

Question

cssだけを使って1枚ずつ自動的に表示したい画像がいくつかあります。私はそのためのアニメーションに使用しています。これは正常に機能しています。

http://jsfiddle.net/vinnizworld/Sap24/

しかし、アニメーションの各ステップにトランジションを追加するにはどうすればよいですか。

Answer 1

@-webkit-keyframes move{
  0%{ margin-left: 0;  }
  10%{    margin-left: -440px;  }
  100%{    margin-left: -5440px;  }
}

fromとto便利なキーワードですが、を使用%すると、必要な数のステップを追加できます。

Answer 2

http://jsfiddle.net/Sap24/2/が必要ですか。このように書いてください：

.img-wrapper{
            width: 9999px;
            margin-left: 0;
            z-index: -1;
            -webkit-animation:move 25s linear infinite;
        }