CSS3动画播放/暂停

时间：2013-08-04 17:10:13

标签： html css3 animation

经过大量的谷歌搜索和摆弄各种不同的选项，我正在努力让我的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>

所以这就是事情。我试图添加make所有动画播放状态属性“暂停”，然后添加：

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

问题是，这可以预测会使menuOne类的行为就好像它是标记一样。我正在寻找的是一种悬停在不同菜单项（menuOne，menuTwo等）上的方法，并让标记移动到它在该项目上的位置。

我完全失去了，并且会喜欢一些帮助！

谢谢你们和女孩们！

1 个答案:

答案 0 :(得分：0)

首先，不要使用中心标签。有更好的方法可以在中间放置东西，在你的情况下会提供菜单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

如果您有任何疑问，请告诉我们！

相关问题
最新问题