CSS單個元素的多個動畫，沒有javascript

我想創建一個圖像幻燈片，只使用CSS和沒有Javascript。CSS單個元素的多個動畫，沒有javascript

我在這裏有一個幾乎所有的工作示例：http://codepen.io/k/pen/Dkhei。問題是，當我停止懸停在其元素上時，「Previous」功能的動畫不會暫停。

我在單個元素上定義了兩個動畫，其類名是'imageContainer'。我很想知道我的語法是錯誤的還是我想要做的事情是不可能的。

HTML：

<div class='carouselContainer'> 
<div class='directionSelector previous'>Previous</div> 
<div class='directionSelector next'>Next</div> 
<div class='imagesContainer'> 
    <img class='visible' src='http://ibmsmartercommerce.sourceforge.net/wp-content/uploads/2012/09/Roses_Bunch_Of_Flowers.jpeg'/> 
    <img class='hidden' src='http://houseoflowers.com/wp-content/uploads/2013/03/Splendid-flowers-wallpaper-wallpapers-1920x1200-mrwallpaper-com.jpg'/> 
    <img class='hidden test' src='http://wallzpoint.com/wp-content/gallery/flower-4/flower-flowers-31723005-1600-1200.jpg'/> 
    <img class='hidden' src='http://images2.layoutsparks.com/1/179204/no-idea-t5-flowers.jpg'/> 
    <img class='hidden' src='http://3.bp.blogspot.com/-Ca_H0XQYQI4/UQFMSauQxTI/AAAAAAAABik/WHzskd_HqqU/s1600/flowers.jpg'/> 
</div> 
</div>

CSS：

.carouselContainer{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    border: 1px solid grey; 
    width: 450px; 
    height: 300px; 
    position: relative; 
    background-color: grey; 
    margin: auto; 
    overflow: hidden; 
} 

.directionSelector{ 
    width: 60px; 
    height: 1.5em; 
    line-height: 1.5em; 
    top: 150px !important; 
    position: absolute; 
    cursor: pointer; 
    background-color: rgba(1,1,1,.7); 
    color: white; 
    text-align: center; 
    border-radius: 5px; 
} 
.previous{ 
    top: 0; 
    left: 5px; 
} 
.next{ 
    top: 0; 
    right: 5px; 
} 
img{ 
    width: 100%; 
    height: 300px; 
    float: left; 
} 
.imagesContainer{ 
    width: 100%; 
    background-color: yellow; 
    -webkit-animation-name: showImagesPrev,showImagesNext; 
    -webkit-animation-duration: 5s,5s; 
    -webkit-animation-play-state: paused,paused; 
    -webkit-animation-fill-mode: forwards,forwards; 

    -moz-animation-name: showImagesPrev,showImagesNext; 
    -moz-animation-duration: 5s,5s; 
    -moz-animation-play-state: paused,paused; 
    -moz-animation-fill-mode: forwards,backwards; 

    animation-name: showImagesPrev,showImagesNext; 
    animation-duration: 5s,5s; 
    animation-play-state: paused,paused; 
    animation-fill-mode: forwards,backwards; 

} 
.previous:hover ~ div.imagesContainer{ 
    -webkit-animation-name: showImagesPrev; 
    -webkit-animation-play-state: running; 

    -moz-animation-name: showImagesPrev; 
    -moz-animation-play-state: running; 

    animation-name: showImagesPrev; 
    animation-play-state: running; 
} 
.next:hover ~ div.imagesContainer{ 
    -webkit-animation-name: showImagesNext; 
    -webkit-animation-play-state: running; 

    -moz-animation-name: showImagesNext; 
    -moz-animation-play-state: running; 

    animation-name: showImagesNext; 
    animation-play-state: running; 
} 
@-webkit-keyframes showImagesPrev{ 
    from{ 
    margin-top: 0px; 
    } 
    to{ 
    margin-top: -1200px; 
    } 
} 
@-moz-keyframes showImagesPrev{ 
    from{ 
    margin-top: 0px; 
    } 
    to{ 
    margin-top: -1200px; 
    } 
} 
@keyframes showImagesPrev{ 
    from{ 
    margin-top: 0px; 
    } 
    to{ 
    margin-top: -1200px; 
    } 
} 
@-webkit-keyframes showImagesNext{ 
    from{ 
    margin-top: -1200px; 
    } 
    to{ 
    margin-top: 0px; 
    } 
} 
@-moz-keyframes showImagesNext{ 
    from{ 
    margin-top: -1200px; 
    } 
    to{ 
    margin-top: 0px; 
    } 
} 
@keyframes showImagesNext{ 
    from{ 
    margin-top: -1200px; 
    } 
    to{ 
    margin-top: 0px; 
    } 
}

謝謝您的幫助:)

來源

2013-04-04 karol

這似乎不是問題的原因，但可能會出現「animation-fill-mode」錯誤。其中之一是「向前，向前」，另外兩個是「向前，向後」。 – 2013-04-04 21:05:08

我認爲這可能只適用於可以在任何時候反轉單個動畫的方向。我嘗試過使用單個動畫並在'normal'和'reverse'之間切換'animation-direction'（用於下一個和前一個），但這似乎不起作用。 – 2013-04-04 21:40:50

@Matt，有同樣的想法，並試圖讓它工作......也沒有運氣。但我認爲這是正確的方式。 – 2013-04-04 21:48:46

按照W3C標準animation-name財產Link

如果多個動畫是attempti ng來修改相同的屬性，那麼最接近名稱列表末尾的動畫將獲勝。

在你的例子中，showImagesPrev被首先引用，而showImagesNext是最後一個，所以它按照W3C正常工作。如果您交換這兩個參考，Previous將正常工作，而Next按鈕重現此問題。 A working Example

來源

2013-05-15 08:50:56

兩年前同樣的問題困擾着我。很高興現在找到答案！ – Luca 2014-09-04 23:37:40

CSS單個元素的多個動畫，沒有javascript

回答

相關問題