重新启动时如何使这个 CSS 关键帧动画平滑？

Posted 2023-03-06

【中文标题】重新启动时如何使这个 CSS 关键帧动画平滑？

【英文标题】：How can I make this CSS keyframe animation smooth when it restarts?

【发布时间】：2017-05-10 01:21:12

【问题描述】：

我有一个看起来像雪的 CSS 关键帧动画。它设置为持续 20 秒并无限循环，它确实如此。问题是当动画在设定的时间后到达结束并重新启动时，它是一种生涩/笨拙的重新启动。

有没有一种方法可以在动画循环时让它更流畅，使它看起来不像是在重新启动，而只是一个恒定的流动？

body 
    height: 100%;
    /*background-color: #333;*/
    background-color: #6b92b9;
    background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png');
    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    -ms-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;


@-webkit-keyframes snow 
    0% 
        background-position: 0px 0px, 0px 0px, 0px 0px
    
    50% 
        background-color: #b4cfe0
    
    100% 
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #6b92b9;
    


@-moz-keyframes snow 
    0% 
        background-position: 0px 0px, 0px 0px, 0px 0px
    
    50% 
        background-color: #b4cfe0
    
    100% 
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #6b92b9;
    


@-ms-keyframes snow 
    0% 
        background-position: 0px 0px, 0px 0px, 0px 0px
    
    50% 
        background-color: #b4cfe0
    
    100% 
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #6b92b9;
    


@keyframes snow 
    0% 
        background-position: 0px 0px, 0px 0px, 0px 0px
    
    50% 
        background-color: #b4cfe0
    
    100% 
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #6b92b9;
    

【参考方案1】：

背景位置必须乘以原始大小。 例如，如果您的图像尺寸为 100x100，则背景位置可以是 100x100、100x200、200x100、200x200 等

body 
  height: 100%;
  /*background-color: #333;*/
  background-color: #6b92b9;
  background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png');
  animation: snow 5s linear infinite both;

@keyframes snow 
  0% 
    background-position: 0px 0px, 0px 0px, 0px 0px;
  
  50% 
    background-color: #b4cfe0;
  
  100% 
    background-position: 300px 300px, 400px 400px, 500px 500px;
    background-color: #6b92b9;
  

【讨论】：

效果很好。如果你真的在寻找过渡，你可以看到它，但这还不足以成为一个问题。谢谢！

可以添加animation-timing-function：ease-in-out；将动画设置为缓和，它也应该有所帮助。