html - CSS3 アニメーションの再生/一時停止

Question

多くのグーグルとさまざまなオプションをいじった後、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 など) の上にカーソルを置き、マーカーをその項目上の位置に移動させる方法です。

完全に途方に暮れていて、助けが欲しいです!

みんなありがとう！

score 0 · Accepted Answer

まず、センタータグを使用しないでください。メニューを提供するあなたの場合、物事を真ん中に配置するためのはるかに良い方法がありますtext-align:center;

純粋な CSS アニメーションを使用して得られる最も近いものは、このようなもので、メニューにカーソルを合わせるとアニメーションが一時停止します。あなたのアニメーションはループで実行され、現在 CSS3 では別の時点でアニメーションを再開することは許可されていないため、うまく実行できません。

そうは言っても、アニメーションに沿って単純なトランジションを追加すると、このようなはるかに望ましい結果を得ることができます! いくつかの不具合がありますが、もう少しスムーズにするためにいじってみるとよいでしょう。ただし、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>

position:absoluteとにかく使用するため、HTML構造を変更しました。これにより、.aboutとの選択が.menuMarker簡単になりました

補足:top:0px;アニメーションに対して同じことを宣言する必要はありません。変えろと言わないと変わりません。また、CSS では、ピクセル値が 0 の場合、必要に応じてそのままにしておくことができます。別名top:0=top:0px

ご不明な点がございましたら、お気軽にお問い合わせください。

html - CSS3 アニメーションの再生/一時停止

1 に答える 1

Related

Reference