html5 + css3 slider 动画问题与 chrome

Question

这是轮播的 CSS3 和 HTML

http://jsfiddle.net/5P7Gu/

#slider {
    height:150px;
    position:absolute;
    clip:rect(0px,900px,140px,0px);
    overflow:hidden;
}
#insideSlider{
    animation: move1 20s ease 2s infinite   ; 
   -moz-animation: move1 20s ease 2s infinite  ; 
   -webkit-animation: move1 20s ease 2s infinite  ; 
}
#insideSlider:hover {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -animation-play-state:paused;
}


@keyframes move1 {
0% {transform:translateX(0px);}
10% {transform:translateX(-155px);}
20% {transform:translateX(-310px);}
30% {transform:translateX(-465px);}
40% {transform:translateX(-620px);}
50% {transform:translateX(-775px);}
60% {transform:translateX(-930px);}
70% {transform:translateX(-1085px);}
80% {transform:translateX(-1240px);}
90% {transform:translateX(-1395px);}
100% {-webkit-transform:translateX(0px);}
} 

@-webkit-keyframes move1 {
0% {-webkit-transform:translateX(0px);}
10% {-webkit-transform:translateX(-155px);}
20% {-webkit-transform:translateX(-310px);}
30% {-webkit-transform:translateX(-465px);}
40% {-webkit-transform:translateX(-620px);}
50% {-webkit-transform:translateX(-775px);}
60% {-webkit-transform:translateX(-930px);}
70% {-webkit-transform:translateX(-1085px);}
80% {-webkit-transform:translateX(-1240px);}
90% {-webkit-transform:translateX(-1395px);}
100% {-webkit-transform:translateX(0px);}
}  
@-moz-keyframes move1 {
0% {-moz-transform:translateX(0px);}
10% {-moz-transform:translateX(-155px);}
20% {-moz-transform:translateX(-310px);}
30% {-moz-transform:translateX(-465px);}
40% {-moz-transform:translateX(-620px);}
50% {-moz-transform:translateX(-775px);}
60% {-moz-transform:translateX(-930px);}
70% {-moz-transform:translateX(-1085px);}
80% {-moz-transform:translateX(-1240px);}
90% {-moz-transform:translateX(-1395px);}
100% {-webkit-transform:translateX(0px);}
}  


.vignette {
    display:inline-block;
    width:130px;
    margin:10px;
}

.imageVignette {
    border:1px solid #CCC;
    position:relative;
}

.imageVignette:hover {
    -webkit-transform:scale(1.2,1.2);
    transition:0.3s;
}

.vignette:hover .description{
    bottom:10px;
    transition:0.3s;
}


.description {
    position:absolute;
    bottom:-20px;
    display:block;  
    width:130px;
    height:30px;
    transition:0.3s;
}



.description .detail {
    font-size:12px;
    position:absolute;bottom:0px;
    height:25px;
    text-align:center;
    background-color:#CCC;
    width:100%;
    text-shadow: 1px 1px 2px #AAA;
}

和 HTML

<div id="slider">
    <div id="insideSlider">

            <div class="vignette">
                <img  class="imageVignette" src="http://placehold.it/128x128"  />
                <div class="description">
                    <div class="detail">
                        <a href="#">hello1</a>
                    </div>
                </div>
            </div>

            <div class="vignette">
                <img  class="imageVignette" src="http://placehold.it/128x128"  />
                <div class="description">
                    <div class="detail">
                        <a href="#">hello1</a>
                    </div>
                </div>
            </div>

            <div class="vignette">
                <img  class="imageVignette" src="http://placehold.it/128x128"  />
                <div class="description">
                    <div class="detail">
                        <a href="#">hello1</a>
                    </div>
                </div>
            </div>

            <div class="vignette">
                <img  class="imageVignette" src="http://placehold.it/128x128"  />
                <div class="description">
                    <div class="detail">
                        <a href="#">hello1</a>
                    </div>
                </div>
            </div>

            <div class="vignette">
                <img  class="imageVignette" src="http://placehold.it/128x128"  />
                <div class="description">
                    <div class="detail">
                        <a href="#">hello1</a>
                    </div>
                </div>
            </div>

            <div class="vignette">
                <img  class="imageVignette" src="http://placehold.it/128x128"  />
                <div class="description">
                    <div class="detail">
                        <a href="#">hello1</a>
                    </div>
                </div>
            </div>

            <div class="vignette">
                <img  class="imageVignette" src="http://placehold.it/128x128"  />
                <div class="description">
                    <div class="detail">
                        <a href="#">hello1</a>
                    </div>
                </div>
            </div>    

            <div class="vignette">
                <img  class="imageVignette" src="http://placehold.it/128x128"  />
                <div class="description">
                    <div class="detail">
                        <a href="#">hello1</a>
                    </div>
                </div>
            </div>  




    </div>                             
</div>

我有两个问题我无法解决

1) 在 chrome 上，当你翻滚时，有时它会以疯狂的方式困惑并向左移动所有 slider !

2) .detail 翻转仅在动画开始之前有效。

欢迎提供有关此纯 css3 slider 的任何线索。

Answer 1

我稍微更新了你的代码。你可以看看here .

1.) 在 chrome 上，我遇到了你上面描述的同样问题:盒子的奇怪移动只发生在动画开始之前。所以我删除了你的 CSS 动画的延迟并且它工作正常。我仍然不确定为什么会这样，需要再看一看。

animation: move1 20s ease infinite; /* Removed delay due to weird behaviour */
-moz-animation: move1 20s ease infinite; 
-webkit-animation: move1 20s ease infinite; 

2.) 你的 CSS 中有一些奇怪的定位。我清理了其中的一些并将悬停时的缩放应用于父级。

您使用了行内 block ，但忘记删除尾随空格 ( http://css-tricks.com/fighting-the-space-between-inline-block-elements/ )。所以我添加了 HTML 注释来去除空白。随意删除它们并使用“float:left;”而不是“内联 block ”。

我做的最后一件事是使用宽度的百分比值，因此您的旋转木马的响应速度更快一些。

编辑: 我忘记将关键帧动画中的过渡值更改为百分比值。