如何播放关键帧0%-50%然后从50%-100%连续循环?我知道这可以通过添加/删除div中的类来实现,但我想在没有
javascript的情况下执行此操作.
body { background: black; } @keyframes divReady { 0% { width: 0vmin; } 50% { width: 20vmin; transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #the-div { position: absolute; top: 40vmin; left: 40vmin; width: 0vmin; height: 20vmin; background: orange; animation: divReady 2s; animation-iteration-count: 2; }
<div id="the-div"> </div>
解决方法
考虑两个动画.一个有前锋而另一个有一个延迟等于第一个持续时间:
body { background: black; } @keyframes divReady-one { 0% { width: 0vmin; } 100% { width: 20vmin; } } @keyframes divReady-two { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #the-div { position: absolute; top: 40vmin; left: 40vmin; width: 0vmin; height: 20vmin; background: orange; animation: divReady-one 1s forwards,divReady-two 2s 1s infinite; }
<div id="the-div"> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。