0
parent-round-divを元のサイズに戻すときにアニメーション化したいと思います。現在のアニメーションを終了してアニメーションを作成することは可能ですか？私はコピーして、ハリーの答えを貼り付け、アニメーションがシーケンスを終了したときに要素をアニメーション化する方法
.parent-round-div{
position: absolute;
border: 2px solid black;
border-radius: 50%;
width: 70px;
height: 70px;
background: green;
-webkit-animation-name: sizeAnimate;
-webkit-animation-duration: 2s ;
-webkit-animation-iteration-count: infinite;
animation-name: sizeAnimate;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.child-round-div{
margin:10%;
position:relative;
top: 40%;
left: 40%;
transform: translate(-50%, -50%);
border: 1px solid black;
border-radius: 50%;
height: 70px;
width:70px;
font-size: 50px;
text-align: center;
background: red;
}
@-webkit-keyframes sizeAnimate{
from{
width: 70px;
height: 70px;
}
to{
width: 80px;
height: 80px;
}
}
@keyframes sizeAnimate{
from{
width:70px;
height: 70px;
}
to{
width: 80px;
height: 80px;
}
}
<div class = "parent-round-div">
<div class="child-round-div">
A
</div>
</div>
初期効果はいつ発生しますか？ホバー上にあるのですか、またはクリックしますか？ 2番目のアニメーションが行われるときとは違いますか？そうでない場合は、単にアニメーション遅延を追加することができます。http://www.w3schools.com/cssref/css3_pr_animation-delay.asp –
ページの読み込み時にアニメーションが発生し、アニメーションの後にもう1つのアニメーションが親子アニメーションで発生します。 round-div。 –
@AbzRockers質問はあまり明確ではありません。 2番目のアニメーションはいつ実行され、どのようにトリガされるべきですか？最初のアニメーションが完了した直後に自動的にトリガされるはずですか？それは少し遅れた後に起動されるべきですか？ユーザーの操作後に起動する必要がありますか？いつ？ – Harry