如何解决CSS中的多个动画-仅重复秒动画
我想同时运行两个动画,而第二个动画的延迟为1秒。
下面的代码可以在初始迭代中完美运行,但是,尽管我将其设置为无限运行,但第一个动画dash01
仅执行一次。
#Vector_42 {
stroke-dasharray: 5;
animation-name: dash01,dash01Rev;
animation-duration: 5s,5s;
animation-delay: 0s,1s;
animation-iteration-count: infinite,infinite;
animation-timing-function: linear,linear;
animation-direction: forwards,forwards;
}
@keyframes dash01 {
0% { stroke: #0066cc; stroke-dashoffset: 5; }
10%,100% { stroke-dashoffset: 15; }
}
@keyframes dash01Rev {
0% { stroke: #0066cc; stroke-dashoffset: -5; }
10%,100% { stroke-dashoffset: -15; }
}
有什么想法我在这里做错了吗?
工作示例:https://jsfiddle.net/Azrion/hzrbfj34/1/
解决方法
感谢@Temani Afif的建议:
只需在一个动画中完成所有操作。您需要计算或估计1s的延迟量,然后以这种方式实现:
develop
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。