每分钟运行一次css动画

HTML

<div></div>

CSS

div { 
    width: 300px; 
    height: 300px; 
    animation: anim 1s; 
    background: brown; 
} 
@keyframes anim { 
    from { 
    background: red; 
    } 
    top { 
    background: blue; 
    } 
}

需要此无javascript

来源

2015-12-02 sall brown

你需要 “假”，如果你想要一个纯CSS的解决方案。使用百分比属性和动画持续时间来模拟延迟。

例如

div { 
 
    height: 20px; 
 
    width: 20px; 
 
    background-color: blue; 
 
    animation: changebgc 5s infinite; 
 
} 
 
@keyframes changebgc { 
 
    2% { 
 
    background-color: red; 
 
    } 
 
    4% { 
 
    background-color: blue; 
 
    } 
 
    98% { 
 
    background-color: blue; 
 
    } 
 
}

<div></div>

来源

2015-12-02 14:32:26

在CSS这样做需要一个黑客位，但它可以做到的。你将不得不做一些数学，并找到如何正确时间的动画：

div { 
    width: 300px; 
    height: 300px; 
    animation: anim 300s infinite; 
    background: brown; 
} 

@keyframes anim { 
    0% { 
    background: red; 
    } 
    0.33% { 
    background: blue; 
    } 
    100% { 
    background: blue; 
    } 
}

JSFiddle demo
的一个问题是，它是很难改变的时机。使用当前设置，red - blue转换需要1秒，就像您在JSFiddle中一样。
你如何计算它很简单：
100/#_seconds = percentage in animation for 1 sec例如100/300 = 0.33

您可以在这个网站了解更多关于这一点：
http://samuelmichaud.fr/2013/web-design/add-a-delay-between-repeated-css3-animations/

来源

2015-12-02 14:33:41

我想你可以用“动画时长”和“动画延迟”的游戏规则。您可以设置效果的持续时间，以及延迟等待下一次迭代。

div{ 
    width: 300px; 
    height: 300px; 

    background: brown; 
    animation-name: anim; 
    animation-duration: 10s; 
    animation-iteration-count: 10000; 
    animation-direction: alternate; 
    animation-timing-function: ease-out; 
    animation-fill-mode: forwards; 
    animation-delay: 50s; 
} 
@keyframes anim { 
    from { 
    background: red; 
    } 
    to { 
    background: blue; 
    } 
}

希望它有帮助。

Regards

来源

2015-12-02 14:37:25 Estefano

每分钟运行一次css动画

回答

相关问题