CSS动画 - 如何让这部动画更流利？

-2

首先，我不打算使用Javascript。完全在HTML & CSS中完成。CSS动画 - 如何让这部动画更流利？

我想重新创建this animation这是一个在AE中制作的gif，纯粹是在CSS中。这正是我现在所拥有的，但是正如你所看到的那样，它在中间变慢了，并且让人感觉有一种奇怪的延迟，任何人都知道我能如何摆脱这种情况（这可能是因为放置/使用@keframes不合适）？

.kader { 
 
    width: 85px; 
 
    height: 85px; 
 
    border-color: black; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    margin: 60px 30px; 
 
    position: absolute; 
 
    animation-delay: 0s; 
 
    animation-duration: 1.5s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: ease-in-out; 
 
    transform-origin: center; 
 
} 
 

 
.k1 { 
 
    animation-name: animation_k1; 
 
    transform: rotate(45deg); 
 
} 
 

 
.k2 { 
 
    animation-name: animation_k2; 
 
} 
 

 
.k3 { 
 
    animation-name: animation_k3; 
 
} 
 

 
.k4 { 
 
    animation-name: animation_k4; 
 
} 
 

 
.k5 { 
 
    animation-name: animation_k5; 
 
} 
 

 
@keyframes animation_k1 { 
 
    0% { 
 
     transform: rotate(45deg); 
 
    } 
 
    25% { 
 
     transform: rotate(90deg); 
 
    } 
 
    50% { 
 
     transform: rotate(45deg); 
 
    } 
 
    75% { 
 
     transform: rotate(0deg); 
 
    } 
 
    100% { 
 
     transform: rotate(45deg); 
 
    } 
 
}

<div id="animatie"> 
 
      <div class="kader k1"></div> 
 
      <div class="kader k2"></div> 
 
      <div class="kader k3"></div> 
 
      <div class="kader k4"></div> 
 
      <div class="kader k5"></div> 
 
     </div>

来源

2017-05-08 Panic

为什么这会陷入遗忘？ –

@JonasGiuro确切的原因是这样的：“寻求调试帮助的问题（”为什么这个代码不工作？“）必须包含所需的行为，特定的问题或错误以及在问题本身中重现问题所需的最短代码。没有明确问题陈述的问题对其他读者没有用。请参阅：[如何创建最小，完整和可验证的示例。]（http://stackoverflow.com/help/mcve）“。我不同意尝试关闭。最小的例子就在那里。它只需要从小提琴移动到一个堆栈片段。 –

我编辑的问题有堆栈片段。 –

你过于复杂的事情，你需要的是animation-direction: alternate;

.kader { 
 
    width: 85px; 
 
    height: 85px; 
 
    border-color: black; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    margin: 60px 30px; 
 
    position: absolute; 
 
    animation-delay: 0s; 
 
    animation-duration: 1s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: ease-in-out; 
 
    animation-direction: alternate; 
 
    transform-origin: center; 
 
} 
 

 
.k1 { 
 
    animation-name: animation_k1; 
 
    transform: rotate(45deg); 
 
} 
 

 
.k2 { 
 
    animation-name: animation_k2; 
 
} 
 

 
.k3 { 
 
    animation-name: animation_k3; 
 
} 
 

 
.k4 { 
 
    animation-name: animation_k4; 
 
} 
 

 
.k5 { 
 
    animation-name: animation_k5; 
 
} 
 

 
@keyframes animation_k1 { 
 
    0% { 
 
     transform: rotate(-45deg); 
 
    } 
 

 
    100% { 
 
     transform: rotate(45deg); 
 
    } 
 
}

<div id="animatie"> 
 
      <div class="kader k1"></div> 
 
      <div class="kader k2"></div> 
 
      <div class="kader k3"></div> 
 
      <div class="kader k4"></div> 
 
      <div class="kader k5"></div> 
 
     </div>

来源

2017-05-08 14:49:58

应该是这样的：https：//jsfiddle.net/dalinhuang/qxfdxh46/1/ –

取决于，我把静态平方当作参考，但是是的，我明白你的意思了。 –

非常感谢你！ – Panic

如果我corrrectly理解您的问题，这是你的：

animation-timing-function: ease-in-out;

这是导致问题。对于中间没有小“停止”的动画。尝试使用线性替代：

animation-timing-function: linear;

您也可以尝试创建自己的自定义贝塞尔曲线以获得正确的时间。

正如指出的那样，它似乎也似乎是你的动画技巧过于复杂。尝试使用：

animation-direction: alternate;

而不是动画前进和后退。

来源

2017-05-09 12:25:50 NoteTheNote

CSS动画 - 如何让这部动画更流利？

回答

相关问题