我希望在返回原始大小时为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>
答案 0 :(得分:0)
为了在我的问题上找到正确答案而不是删除问题,我复制并粘贴了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;
}
}
&#13;
<div class="parent-round-div">
<div class="child-round-div">
A
</div>
</div>
&#13;
谢谢!