Question

我在这个动画上摸不着头脑，我需要创作。我已经简要介绍了如"missing" video

中移动单个元素的内容

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

<input id="fileselector" type="file" onchange="browseResult(event)" webkitdirectory directory multiple="false" style="display:none" />
<button onclick="getElementById('fileselector').click()">browse</button>

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

Answer 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）和计时功能（线性，缓入，......）来获得你想要的东西。

Answer 2

关键帧是做动画的好方法。您可以通过延长动画时间来减慢速度，或者通过为每个字母添加不同的延迟来减慢速度。

但我可能会选择这样的事情。

＆＃13;

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);
  }
}

＆＃13;

<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>

＆＃13;

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

2 个答案: