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

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

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

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

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

【问题讨论】:

  • FWIW 您链接到的网站正在使用视频。
  • @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>

    【讨论】:

      猜你喜欢
      • 2011-04-11
      • 1970-01-01
      • 1970-01-01
      • 2018-03-03
      • 2023-03-28
      • 1970-01-01
      • 2022-08-23
      • 1970-01-01
      • 2012-11-03
      相关资源
      最近更新 更多