代码之家 › 专栏 › 技术社区 › Tobias Glaus

元素两次设置动画看起来很奇怪

css-animations animation css html

Tobias Glaus · 技术社区 · 6 年前

所以我得到了这支笔: https://codepen.io/tobiasglaus/pen/NedpxQ

每当它“咔哒”一声,一个圆就应该被设置动画。动画中有两次单击,所以我只添加了两次动画,如下所示:

animation: circle .3s forwards, circle .3s forwards;
animation-delay: 1.7s, 4.9s;

问题是,圆不再是一个圆,而是一个模糊的正方形:

但应该是这样的:

我不能在这样的代码片段中复制这个问题,但是由于我需要提供一个最少的代码示例,下面是它应该如何显示的代码片段。

注意:当我使用chrome devtools查看动画时,动画看起来是正确的。

.circle:after{
  content:"";
  position:absolute;
  top:20px;
  left:20px;
  width:50px;
  height:50px;
  border-radius:50%;
  border:2px solid #222f3e;
  animation:circle .3s forwards, circle .3s forwards;
  animation-delay:0s, 1s;
  opacity:0;
  transform:scale(0);
}

@keyframes circle {
  0%{
    transform:scale(0);
  }
  50%{
    opacity:1;
  }
  100%{
    transform:scale(1);
    opacity:0;
  }
}