CSS3画像スライダー連続スライドアニメーション

Question

無限の連続スライドアニメーションで純粋なcss3画像スライダーを作成しようとしていました。私はCSS3を使用してアニメーションを行うことができましたが、最後のスライドの最後に小さな問題がありました。最後のスライドの後、突然css3スムーズな変換効果なしで最初のスライドに移動します。これを解決する簡単な方法はありますか？ここ は、あなたのアニメーションが仕上げているので、あなたは最後の方の後にアニメーションされていないコード

#slideshow{ 
position: relative; 
width: 200px; 
height: 400px; 
overflow: hidden; 
border: 5px solid #fff;} 
#slideshow img{ 
position: absolute; 
left: 0; 
top: 0; 
animation: slide 5s infinite; 
} 
@keyframes slide{ 
0%{ transform:translateX(0px) } 
33%{ transform:translateX(-200px) } 
66%{ transform:translateX(-400px) } 
100%{ transform:translateX(-600px) } 
} 

<div id="slideshow"><img src="http://oi67.tinypic.com/24mia39.jpg"></div> 

jsFiddle link

Answer 1

です。お返事のための

@keyframes slide{ 
    0%{ transform:translateX(0px) } 
    25%{ transform:translateX(-200px) } 
    50%{ transform:translateX(-400px) } 
    75%{ transform:translateX(-600px) } 
    100%{ transform:translateX(0px) } 
} 

jsFiddle link