点描のアニメーション

Question

親要素内にスパンとして3つの点があるとします。

遅延を伴ってドットを1つずつジャンプさせる親のホバーアニメーションを作成する必要があります。私はホバーなしでこれを達成しましたが、私は親要素をホバリングするときに動作するアニメーションが必要です。私が親要素をホバーする瞬間、子供には遅れは適用されません。

.dots-cont { 
 
    position: absolute; 
 
    right: 0px; 
 
    bottom: 0px; 
 
} 
 

 
.dot { 
 
    width: 12px; 
 
    height: 12px; 
 
    background: #22303e; 
 
    display: inline-block; 
 
    border-radius: 50%; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    margin: 0px 2.5px; 
 
    position: relative; 
 
} 
 

 
.dots-cont:hover > .dot { 
 
    position: relative; 
 
    bottom: 0px; 
 
    animation: jump 1s infinite; 
 
} 
 

 
.dots-cont .dot-1{ 
 
    -webkit-animation-delay: 100ms; 
 
    animation-delay: 100ms; 
 
} 
 

 
.dots-cont .dot-2{ 
 
    -webkit-animation-delay: 200ms; 
 
    animation-delay: 200ms; 
 
} 
 

 
.dots-cont .dot-3{ 
 
    -webkit-animation-delay: 300ms; 
 
    animation-delay: 300ms; 
 
} 
 

 
@keyframes jump { 
 
0% {bottom: 0px;} 
 
20% {bottom: 5px;} 
 
40% {bottom: 0px;} 
 
}

<span class="dots-cont"> 
 
    <span class="dot dot-1"></span> 
 
    <span class="dot dot-2"></span> 
 
    <span class="dot dot-3"></span> 
 
</span>

Answer 1

あなただけ.dotベースの代わり:hoverバージョンへanimationプロパティを追加する必要があります。このようにして、あなたは何があっても同じ動作をします。ホバークラスに必要なプロパティを追加することができます（カラーの変更など）。

.dots { 
    animation: jump 1s infinite; 
} 

https://jsfiddle.net/3gampq0b/5/

EDIT：ドットホバーでアニメーションを防ぐために。

.dots-cont:hover > .dot { 
    animation: none; 
} 

https://jsfiddle.net/3gampq0b/6/

EDIT：のみ親ホバーでアニメーション化。

.dots-contにパディングを追加して、ホバー表面積が大きくなるようにすることもできます。

.dots-cont:hover > * { 
    animation: jump 1s infinite; 
} 

https://jsfiddle.net/3gampq0b/7/

Answer 2

私は、私はjQueryを使ってアニメーションクラスを追加および削除

.anim .dot {...} 

に

.dots-cont:hover > .dot { 
    position: relative; 
    bottom: 0px; 
    animation: jump 1s infinite; 
} 

を変更しました。

Answer 3

「アニメーションを使用すると、1秒間無限にジャンプします。 .dot要素のアニメーション遅延プロパティをオーバーライドしています。

が、これはあなたがやろうとしているものであるかどうかを確認し、スニペットの下には試してみてください。

.dots-cont{ 
 
    position: absolute; 
 
    left: 100px; 
 
    top: 100px; 
 
} 
 

 
.dot{ 
 
    width: 12px; 
 
    height: 12px; 
 
    background: #22303e; 
 
    display: inline-block; 
 
    border-radius: 50%; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    margin: 0px 2.5px; 
 
    position: relative; 
 
} 
 

 
.dots-cont:hover > .dot { 
 
    position: relative; 
 
    bottom: 0px; 
 
    animation-name: jump; 
 
    animation-duration: .3s; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
    animation-timing-function: ease; 
 
    } 
 

 
.dots-cont .dot-1{ 
 
-webkit-animation-delay: 100ms; 
 
    animation-delay: 100ms; 
 
} 
 

 
.dots-cont .dot-2{ 
 
    -webkit-animation-delay: 200ms; 
 
    animation-delay: 200ms; 
 
} 
 

 
.dots-cont .dot-3{ 
 
    -webkit-animation-delay: 300ms; 
 
    animation-delay: 300ms; 
 
} 
 
@keyframes jump { 
 
    from {bottom: 0px} 
 
    to {bottom: 20px} 
 
} 
 
@-webkit-keyframes jump { 
 
    from {bottom: 0px} 
 
    to {bottom: 10px} 
 
}

<span class="dots-cont"> 
 
    <span class="dot dot-1"></span> 
 
    <span class="dot dot-2"></span> 
 
    <span class="dot dot-3"></span> 
 
</span>