html - Logo 周围的动画线条

Question

我正在尝试制作一个 CSS3 动画，我可以在其中为 Logo 周围的移动线设置动画效果，从左 Angular 开始，然后回到那里结束，整个边框将保留在那里。

这是我的代码:

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>