Css 当动画完成其序列时,如何设置元素的动画

Css 当动画完成其序列时,如何设置元素的动画,css,html,Css,Html,当返回到原始大小时,我想设置父圆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-d

当返回到原始大小时,我想设置
父圆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>
.parent round div{
位置:绝对位置;
边框:2件纯黑;
边界半径:50%;
宽度:70px;
高度:70像素;
背景:绿色;
-webkit动画名称:sizeAnimate;
-webkit动画持续时间:2秒;
-webkit动画迭代计数:无限;
动画名称:sizeAnimate;
动画持续时间:2秒;
动画迭代次数:无限;
}
.儿童圆分区{
利润率:10%;
位置:相对位置;
最高:40%;
左:40%;
转换:翻译(-50%,-50%);
边框:1px纯黑;
边界半径:50%;
高度:70像素;
宽度:70px;
字体大小:50px;
文本对齐:居中;
背景:红色;
}
@-webkit关键帧sizeAnimate{
从{
宽度:70px;
高度:70像素;
}
到{
宽度:80px;
高度:80px;
}
}
@关键帧sizeAnimate{
从{
宽度:70px;
高度:70像素;
}
到{
宽度:80px;
高度:80px;
}
}
A.

为了对我的问题给出正确答案,而不是删除问题,我复制并粘贴了Harry的答案。(在他评论的JSFIDLE链接上找到) 这是他的回答:

.parent round div{
位置:绝对位置;
边框:2件纯黑;
边界半径:50%;
宽度:70px;
高度:70像素;
背景:绿色;
动画名称:sizeAnimate;
动画持续时间:2秒;
动画迭代次数:无限;
}
.儿童圆分区{
利润率:10%;
位置:相对位置;
最高:40%;
左:40%;
转换:翻译(-50%,-50%);
边框:1px纯黑;
边界半径:50%;
高度:70像素;
宽度:70px;
字体大小:50px;
文本对齐:居中;
背景:红色;
}
@关键帧sizeAnimate{
0%, 100% {
宽度:70px;
高度:70像素;
}
45%, 55% {
宽度:80px;
高度:80px;
}
}

A.

初始效果何时发生?是悬停还是单击?第二个动画发生的时间是否会有所不同?如果没有-您可以在页面加载动画时添加动画延迟,动画发生后,将在parent-round-div上触发另一个动画。@AbzRockers问题不是很清楚。第二个动画应在何时发生,如何触发?是否应在第一个动画完成后立即自动触发?是否应在延迟后触发?是否应该在用户交互后触发?“什么时候?”哈利-很抱歉没有说清楚。它应该在当前动画完成执行后触发。@AbzRockers:你是说喜欢吗?