HTML5 + CSS3滑塊動畫Chrome出現問題

#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代碼的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>

我有2個問題，我解決不了

1）在鉻上，當你翻滾有時它是所有爭奪和莫以瘋狂的方式離開所有的滑塊！

2）.detail翻轉只在動畫開始前有效。

歡迎使用此純css3滑塊的任何線索。

來源

2013-12-19 yarek

我更新了你的代碼。你可以看看它here。

1.）在鉻上，我遇到了與上述相同的問題：盒子的奇怪移動只發生在動畫開始之前。所以我刪除了你的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中進行了一些奇怪的定位。我清理了其中的一些，並將縮放應用於父項。

您使用了行內塊，但忘記刪除尾隨空白（http://css-tricks.com/fighting-the-space-between-inline-block-elements/）。所以我添加了HTML註釋來擺脫空白。隨意刪除它們並使用「float：left;」而不是「內嵌塊」。

我做的最後一件事情是使用寬度的百分比值，因此您的輪播更加靈敏。

編輯： 我忘了將關鍵幀動畫中的過渡值更改爲百分比值。

來源

2013-12-20 01:27:36 Daniel

HTML5 + CSS3滑塊動畫Chrome出現問題

回答

相關問題