如何在 css3 中编写此动画？答案

【问题标题】：How to code this animation in css3?如何在 css3 中编写此动画？
【发布时间】：2018-05-12 08:10:35
【问题描述】：

我上次用 html 和 css 编码已经很久了，那是在那个可爱的 html5 和 css3 之前。所以，在 2000 年代初期，我们用 gif 制作了一个标志，太酷了，我刚刚在我的电脑上找到了它。转换为纯 css 而不是 limited-size-gif 会很好，但我不知道如何启动它。 Here is my animated gif

你能给我第一印象，我应该为它选择哪些 css3 属性？谢谢

【问题讨论】：

你至少应该提供一些解决问题的方法

标签： css animation gif

【解决方案1】：

您可能希望将动画属性与自定义关键帧一起使用。这是一个粗略的例子。我没有花太多时间在动画上。那是你的工作；）

https://codepen.io/bygrace1986/pen/POypXX

HTML

<div class="logo" data-logo="wp"></div>

CSS

.logo {
  position: relative;
  width: 2em;
  height: 2em;
  font-size: 5em;
  font-family: arial;
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
}

.logo::before, .logo::after {
  content: attr(data-logo);
  position: absolute;
  z-index: -1;
  left: 0;
}

.logo::before {
  color: red;
  animation: rotate 1s infinite;
}

.logo::after {
  color: black;
  animation: rotate 1s infinite reverse;
}

@keyframes rotate { 
  0% {
    left: 0;
    top: 0;
  }
  25% {
    left: 10%;
  }
  50% {
    top: 10%;
  }
  75% {
    left: 0;
  }
  100% {
    top: 0;
  }
}

【讨论】：