我想在返回原始大小时为 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>
最佳答案
为了对我的问题给出正确答案而不是删除问题,我复制并粘贴了 Harry 的答案。 (在他评论的 jsfiddle 链接上找到)
这是他的回答:
.parent-round-div {
position: absolute;
border: 2px solid black;
border-radius: 50%;
width: 70px;
height: 70px;
background: green;
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;
}
@keyframes sizeAnimate {
0%, 100% {
width: 70px;
height: 70px;
}
45%, 55% {
width: 80px;
height: 80px;
}
}
<div class="parent-round-div">
<div class="child-round-div">
A
</div>
</div>
谢谢!
关于css - 当动画完成其序列时如何为元素设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36204866/