CSS动画，最好的方法是什么答案

【问题标题】：CSS animation, whats the best approach to thisCSS动画，最好的方法是什么
【发布时间】：2017-06-26 23:15:58
【问题描述】：

我对我需要创建的这个动画摸不着头脑。我被告知要移动单个元素，例如 "missing" video 中的文本

但是，我似乎无法使用关键帧接近动画并像这样翻译 x/y：

 25%  { transform: translate(10px, 10px); }

如何最好地重现这种运动？

【问题讨论】：

FWIW 您链接到的网站正在使用视频。
codepen.io/mcoker/pen/jwwebr这个帮助？
@hungerstar 是的，不过我在 css 中需要它。
@MichaelCoker 这就是我所追求的——我遇到的几乎是圆周运动......
只需在动画中添加更多步骤。你可以rotate() 也可以codepen.io/mcoker/pen/jwwebr 如果这就是你想要的，请告诉我，我会提交答案

标签： css animation css-animations

【解决方案1】：

@keyframes moveit {
  0%  { transform: translate(0px, 0px); }
  25%  { transform: translate(10px, 10px); }
  50%  { transform: translate(20px, 10px); }
  75%  { transform: translate(10px, 20px); }
  100%  { transform: translate(0px, 0px); }
}

它开始时没有变形，它的原始位置。然后它四处走动，然后又回来。重复。您可以添加更多步骤，使其移动更“随机”或更顺畅。

.moveit{ animation: moveit 1s linear infinite; }

使用持续时间 (1s) 和计时功能（线性、缓入缓出……）来获得您想要的结果。

【讨论】：

【解决方案2】：

关键帧是制作动画的好方法。您可以通过延长动画时间或为每个字母设置不同的延迟来减慢它。

但我可能会选择这样的东西。

body {
  background: #3C3C3C;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}

.missing_animation .letter {
  display: inline-block;
  -webkit-animation-name: shakey;
  -webkit-animation-duration: 3s;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  font-size: 120px;
  color: #3C3C3C;
  text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
}

.missing_animation .letter_break {
  display: inline-block;
  transform: translateY(50%);
}

.missing_animation .letter:nth-child(even) {
  -webkit-animation-delay: 0.5s;
}

@keyframes shakey {
  0% {
    transform: translate(1px, .5px) rotate(0deg);
  }
  10% {
    transform: translate(-.5px, -1px) rotate(-.5deg);
  }
  20% {
    transform: translate(-1.5px, 0px) rotate(.5deg);
  }
  30% {
    transform: translate(0px, 1px) rotate(0deg);
  }
  40% {
    transform: translate(.5px, -.5px) rotate(.5deg);
  }
  50% {
    transform: translate(-.5px, 1px) rotate(-.5deg);
  }
  60% {
    transform: translate(-1.5px, .5px) rotate(0deg);
  }
  70% {
    transform: translate(1px, .5px) rotate(-.5deg);
  }
  80% {
    transform: translate(-.5px, -.5px) rotate(.5deg);
  }
  90% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  100% {
    transform: translate(.5px, -1px) rotate(-.5deg);
  }
}

<div class="missing_animation">
  <div class="letter">M</div>
  <div class="letter">I</div>
  <div class="letter">S</div>
  <div class="letter">S</div>
  <div class="letter_break">
    <div class="letter">I</div>
    <div class="letter">N</div>
    <div class="letter">G</div>
  </div>
</div>

【讨论】：