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动画播放/暂停

回答

相关问题