徽标周围的动画线条

Question

我正在制作一个CSS3动画，我可以从左角开始围绕徽标移动线条，然后在那里结束，整个边框将保留在那里。

这是我的代码：

div {
  width: 100px;
  height: 100px;
  position: relative;
  animation-name: example;
  animation-duration: 20s;
}
@keyframes example {
  0% {
    border-left: 10px;
    border-color: black;
  }
  25% {
    border-bottom: 10px;
    border-color: black;
  }
  50% {
    border-right: 10px;
    border-color: black;
  }
  75% {
    border-top: 10px;
    border-color: black;
  }
  100% {
    border: 10px;
    border-color: black;
  }
}

<div>
  <img src="http://placehold.it/100x100">
</div>

...但是不正在工作。有什么想法吗？

Answer 1

你需要设置一个边框以开始..它不能为不存在的东西设置动画...只需将border:1px solid black;添加到你的div代码中。

如果您希望它在最终帧上结束并保留该样式，则还需要2个其他属性...

animation-iteration-count: 1; // runs animation once
animation-fill-mode: forwards; // keep style specified in last keyframe

最终代码如下：

div {
  border: 0px solid black;
  width: 100px;
  height: 100px;
  position: relative;
  animation-name: example;
  animation-duration: 10s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes example {
  0% {
    border-left: 10px;
    border-color: black;
  }
  25% {
    border-top: 10px;
    border-color: black;
  }
  50% {
    border-right: 10px;
    border-color: black;
  }
  75% {
    border-bottom: 10px;
    border-color: black;
  }
  100% {
    border: 10px solid black;
    border-color: black;
  }
}

<div>
  <img src="http://placehold.it/100x100">
</div>