CSS3動畫播放/暫停

經過大量的谷歌搜索和各種不同的選項擺弄，我努力讓我的CSS3動畫以我想要的方式行事！CSS3動畫播放/暫停

讓我先從代碼

<html> 
<head> 
<style> 
body 
{ 
overflow:hidden; 
margin:0px; 
} 
.about 
{ 
overflow:hidden; 
width:400%; 
height:95%; 
background:#10b4ff; 
position:absolute; 
animation-name:contentPane; 
animation-duration:5s; 
animation-timing-function:ease; 
animation-delay:0s; 
animation-iteration-count:infinite; 
animation-direction:alternate; 
animation-play-state:running; 
/* Safari and Chrome: */ 
-webkit-animation-name:contentPane; 
-webkit-animation-duration:5s; 
-webkit-animation-timing-function:ease; 
-webkit-animation-delay:0s; 
-webkit-animation-iteration-count:infinite; 
-webkit-animation-direction:alternate; 
-webkit-animation-play-state:running; 
} 

@keyframes contentPane 
{ 
0% {background:#eeeeee; left:0px; top:0px;} 
33% {background:#10b4ff; left:-100%; top:0px;} 
66% {background:#eeeeee; left:-200%; top:0px;} 
100% {background:#10b4ff; left:-300%; top:0px;} 
} 

@-webkit-keyframes contentPane 
{ 
0% {background:#eeeeee; left:0px; top:0px;} 
33% {background:#10b4ff; left:-100%; top:0px;} 
66% {background:#eeeeee; left:-200%; top:0px;} 
100% {background:#10b4ff; left:-300%; top:0px;} 
} 
.menuMarker{ 
width:20px; 
height:20px; 
border:2px solid #fff; 
background:#fff; 
border-radius:50%; 
bottom:7%; 
position:absolute; 
/* Animation */ 
animation-name:menuMarker; 
animation-duration:5s; 
animation-timing-function:ease; 
animation-delay:0s; 
animation-iteration-count:infinite; 
animation-direction:alternate; 
animation-play-state:running; 
/* Safari and Chrome: */ 
-webkit-animation-name:menuMarker; 
-webkit-animation-duration:5s; 
-webkit-animation-timing-function:ease; 
-webkit-animation-delay:0s; 
-webkit-animation-iteration-count:infinite; 
-webkit-animation-direction:alternate; 
-webkit-animation-play-state:running; 
} 
@keyframes menuMarker 
{ 
0% {background:#10b4ff; border:#eeeeee 2px solid; border-radius:50%; left:12.5%;} 
33% {background:#eeeeee; border:#10b4ff 2px solid; border-radius:30%; left:37.5%;} 
66% {background:#10b4ff; border:#eeeeee 2px solid; border-radius:50%; left:62.5%;} 
100% {background:#eeeeee; border:#10b4ff 2px solid; border-radius:30%; left:87.5%;} 
} 

@-webkit-keyframes menuMarker 
{ 
0% {background:#10b4ff; border:#eeeeee 2px solid; border-radius:50%; left:12.5%;} 
33% {background:#eeeeee; border:#10b4ff 2px solid; border-radius:30%; left:37.5%;} 
66% {background:#10b4ff; border:#eeeeee 2px solid; border-radius:50%; left:62.5%;} 
100% {background:#eeeeee; border:#10b4ff 2px solid; border-radius:30%; left:87.5%;} 
} 

.one{ 
width:25%; 
height:100%; 
left:0px; 
top:0px; 
position:absolute; 
color:#10b4ff; 
} 
.two{ 
width:25%; 
height:100%; 
left:25%; 
top:0px; 
position:absolute; 
color:#eeeeee; 
} 
.three{ 
width:25%; 
height:100%; 
left:50%; 
top:0px; 
position:absolute; 
color:#10b4ff; 
} 
.four{ 
width:25%; 
height:100%; 
left:75%; 
top:0px; 
position:absolute; 
color:#eeeeee; 
} 
.menuOne{ 
border-top:2px #fff solid; 
left:0%; 
width:25%; 
height:5%; 
bottom:0px; 
background:#10b4ff; 
position:fixed; 
} 
.menuTwo{ 
border-top:2px #fff solid; 
left:25%; 
width:25%; 
height:5%; 
bottom:0px; 
background:#eeeeee; 
position:fixed; 
} 
.menuThree{ 
border-top:2px #fff solid; 
left:50%; 
width:25%; 
height:5%; 
bottom:0px; 
background:#10b4ff; 
position:fixed; 
} 
.menuFour{ 
border-top:2px #fff solid; 
left:75%; 
width:25%; 
height:5%; 
bottom:0px; 
background:#eeeeee; 
position:fixed; 
} 

</style> 
</head> 
<body> 

<div class='about'> 
<div class='one'>Test 1</div> 
<div class='two'>Test 2</div> 
<div class='three'>Test 3</div> 
<div class='four'>Test 4</div> 
</div> 
<div class='menuMarker'></div> 
<div class='menuOne'><center>About</center></div> 
<div class='menuTwo'>Gallery</div> 
<div class='menuThree'>Showreel</div> 
<div class='menuFour'>Contact</div> 
</body> 
</html>

所以這裏的東西。我嘗試添加使所有的動畫播放狀態屬性「暫停」，然後添加：

menuOne:hover 
{ 
animation-name:menuMarker; 
animation-play-state:running; 
}

問題是，這種可預見使得menuOne類的行爲，就好像它的標記。我正在尋找的是一種懸停在不同菜單項（menuOne，menuTwo等）上的方法，並讓標記移動到它在該項目上的位置。

我完全失去了，並會喜歡一些幫助！

Thanks guys and gals！

來源

2013-08-04 Dan

首先，不要使用中心標籤。有很多更好的方法來定位中間的東西，在你的情況下，將提供菜單text-align:center;

使用純CSS動畫可以得到最接近的值like this，其中當菜單懸停時動畫暫停。你的動畫運行在一個循環中，目前在CSS3中，你不允許在不同的點重新開始動畫，所以你做不好。

這就是說，你可以添加簡單的過渡動畫並獲得更好的結果like this one!它有一些小故障，但你可能會玩弄它來得到一點平滑。但再一次，因爲CSS3不允許動畫在動畫中開始播放，所以它不會是完美的。如果您使用的JavaScript，以及它可以做一個公平位更平滑，但你沒有提到你的問題

這裏是更新CSS和稍微修改HTML

<html> 
<head> 
<style> 
body { 
    overflow:hidden; 
    margin:0px; 
} 
.about { 
    overflow:hidden; 
    width:400%; 
    height:95%; 
    background:#10b4ff; 
    position:absolute; 
    animation-name:contentPane; 
    animation-duration:15s; 
    animation-timing-function:ease; 
    animation-delay:0s; 
    animation-iteration-count:infinite; 
    animation-direction:alternate; 
    animation-play-state:running; 
    /* Safari and Chrome: */ 
    -webkit-animation-name:contentPane; 
    -webkit-animation-duration:15s; 
    -webkit-animation-timing-function:ease; 
    -webkit-animation-delay:0s; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-direction:alternate; 
    -webkit-animation-play-state:running; 

    transition: all .5s linear; 
    -webkit-transition: all .5s linear; 
} 
@keyframes contentPane { 
    0% { 
     background:#eeeeee; 
     left:0px; 
    } 
    33% { 
     background:#10b4ff; 
     left:-100%; 
    } 
    66% { 
     background:#eeeeee; 
     left:-200%; 
    } 
    100% { 
     background:#10b4ff; 
     left:-300%; 
    } 
} 
@-webkit-keyframes contentPane { 
    0% { 
     background:#eeeeee; 
     left:0px; 
    } 
    33% { 
     background:#10b4ff; 
     left:-100%; 
    } 
    66% { 
     background:#eeeeee; 
     left:-200%; 
    } 
    100% { 
     background:#10b4ff; 
     left:-300%; 
    } 
} 
.menuMarker { 
    width:20px; 
    height:20px; 
    border:2px solid #fff; 
    background:#fff; 
    border-radius:50%; 
    bottom:7%; 
    position:absolute; 
    /* Animation */ 
    animation-name:menuMarker; 
    animation-duration:15s; 
    animation-timing-function:ease; 
    animation-delay:0s; 
    animation-iteration-count:infinite; 
    animation-direction:alternate; 
    animation-play-state:running; 
    /* Safari and Chrome: */ 
    -webkit-animation-name:menuMarker; 
    -webkit-animation-duration:15s; 
    -webkit-animation-timing-function:ease; 
    -webkit-animation-delay:0s; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-direction:alternate; 
    -webkit-animation-play-state:running; 

    transition: all .5s linear; 
    -webkit-transition: all .5s linear; 
} 
@keyframes menuMarker { 
    0% { 
     background:#10b4ff; 
     border:#eeeeee 2px solid; 
     border-radius:50%; 
     left:12.5%; 
    } 
    33% { 
     background:#eeeeee; 
     border:#10b4ff 2px solid; 
     border-radius:30%; 
     left:37.5%; 
    } 
    66% { 
     background:#10b4ff; 
     border:#eeeeee 2px solid; 
     border-radius:50%; 
     left:62.5%; 
    } 
    100% { 
     background:#eeeeee; 
     border:#10b4ff 2px solid; 
     border-radius:30%; 
     left:87.5%; 
    } 
} 
@-webkit-keyframes menuMarker { 
    0% { 
     background:#10b4ff; 
     border:#eeeeee 2px solid; 
     border-radius:50%; 
     left:12.5%; 
    } 
    33% { 
     background:#eeeeee; 
     border:#10b4ff 2px solid; 
     border-radius:30%; 
     left:37.5%; 
    } 
    66% { 
     background:#10b4ff; 
     border:#eeeeee 2px solid; 
     border-radius:50%; 
     left:62.5%; 
    } 
    100% { 
     background:#eeeeee; 
     border:#10b4ff 2px solid; 
     border-radius:30%; 
     left:87.5%; 
    } 
} 
.one { 
    width:25%; 
    height:100%; 
    left:0; 
    top:0; 
    position:absolute; 
    color:#10b4ff; 
} 
.two { 
    width:25%; 
    height:100%; 
    left:25%; 
    top:0; 
    position:absolute; 
    color:#eeeeee; 
} 
.three { 
    width:25%; 
    height:100%; 
    left:50%; 
    top:0; 
    position:absolute; 
    color:#10b4ff; 
} 
.four { 
    width:25%; 
    height:100%; 
    left:75%; 
    top:0; 
    position:absolute; 
    color:#eeeeee; 
} 
.menu { 
    position:absolute; 
    bottom:0; 
    text-align:center; 
    width:25%; 
    height:5%; 
    background:#10b4ff; 
} 
.menuOne { 
    left:0; 
} 
.menuTwo { 
    left:25%; 
} 
.menuThree { 
    left:50%; 
} 
.menuFour { 
    left:75%; 
} 
.menu:nth-child(even) { 
    background:#eeeeee; 
} 
.menu:hover ~ .menuMarker { 
    animation:none; 
    -webkit-animation: none; 
} 
.menu:hover ~ .about { 
    animation: none; 
    -webkit-animation:none; 
} 
.menuOne:hover ~ .about { 
    background:#eeeeee; 
    left:0px; 
} 
.menuTwo:hover ~ .about { 
    background:#10b4ff;; 
    left:-100%; 
} 
.menuThree:hover ~ .about { 
    background:#eeeeee; 
    left:-200%; 
} 
.menuFour:hover ~ .about { 
    background:#10b4ff; 
    left:-300%; 
} 
.menuOne:hover ~ .menuMarker { 
    background:#10b4ff; 
    border:#eeeeee 2px solid; 
    border-radius:50%; 
    left:12.5%; 
} 
.menuTwo:hover ~ .menuMarker { 
    background:#eeeeee; 
    border:#10b4ff 2px solid; 
    border-radius:30%; 
    left:37.5%; 
} 
.menuThree:hover ~ .menuMarker { 
    background:#10b4ff; 
    border:#eeeeee 2px solid; 
    border-radius:50%; 
    left:62.5%; 
} 
.menuFour:hover ~ .menuMarker { 
    background:#eeeeee; 
    border:#10b4ff 2px solid; 
    border-radius:30%; 
    left:87.5%; 
} 
</style> 
</head> 

<body> 
<div class='menu menuOne'>About</div><!-- 
--><div class='menu menuTwo'>Gallery</div><!-- 
--><div class='menu menuThree'>Showreel</div><!-- 
--><div class='menu menuFour'>Contact</div> 
<div class='about'> 
    <div class='one'>Test 1 </div> 
    <div class='two'>Test 2</div> 
    <div class='three'>Test 3</div> 
    <div class='four'>Test 4</div> 
</div> 
<div class='menuMarker'></div> 
</body> 
</html>

我改變你的HTML結構因爲你用position:absolute無論如何，這讓選擇.about和.menuMarker容易

附註：您不必申報您的動畫相同top:0px;。如果你不告訴它改變它不會。同樣在CSS中，如果你有一個像素值爲0，你可以把它關掉，如果你願意，也可以top:0 = top:0px

如果您有任何問題，請告訴我！

來源

2013-08-04 20:34:00

哇！令人驚歎的答案！明天我會看看這一切...... – Dan

對，我一直在玩它，它的工作原理更多我想要的。將播放狀態屬性更改爲暫停狀態後，我可以將鼠標懸停在菜單項上，並選擇顯示正確的內容。但是，停在它上面時，它會返回到第一個菜單項。任何想法，我可以阻止這種情況發生？ – Dan

我相信*你可以使用我發現的一種方法[就像這樣]（http://blog.joelambert.co.uk/2011/09/07/accessing-modifying-css3-animations-with-javascript/）有一天開始在一個不同的關鍵幀比它原來是，但我還沒有試圖使用它（沒有時間），這可能是我錯了。它可能比你習慣做自己更多的參與 –

CSS3動畫播放/暫停

回答

相關問題