每分钟运行一次css动画
问题描述:
如何每5分钟运行一次CSS动画?每分钟运行一次css动画
HTML
<div></div>
CSS
div {
width: 300px;
height: 300px;
animation: anim 1s;
background: brown;
}
@keyframes anim {
from {
background: red;
}
top {
background: blue;
}
}
需要此无javascript
答
你需要 “假”,如果你想要一个纯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>
答
在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/
答
我想你可以用“动画时长”和“动画延迟”的游戏规则。您可以设置效果的持续时间,以及延迟等待下一次迭代。
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