如何解决无限循环@keyframes
我在垂直动画图标时遇到问题,以便它们无限地相互更改。
问题是我有两个图标,我需要它们改变方式(第一个图标 - 青蛙,第二个图标 - 鸟)1 -> 2 -> 1 -> 2 这样看起来就像一个完整的循环在一个方向(底部),我现在拥有的是第一个图标到第二个图标根据需要更改,然后我的动画返回到第一个图标向后而不是向前。
这里是codepen
如果有人能帮助我,我会很高兴。
@keyframes rotate {
10%,15% {
transform: translateY(0);
}
25%,36% {
transform: translateY(-45px);
}
}
解决方法
这对你有用
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300,400');
body {
background: #643a7a;
}
.carousel {
position: relative;
width: 100%;
text-align: center;
font-size: 30px;
line-height: 45px;
height: 45px;
overflow: hidden;
}
.carousel .change_inner {
position: relative;
transform-origin: 0 0;
animation: rotate 4s infinite;
}
@keyframes rotate {
0%,15% {
transform: translateY(0%);
}
50%,66% {
transform: translateY(-45px);
}
90%,100% {
transform: translateY(-90px);
}
}
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.5.0/css/all.css' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'>
<div class="carousel">
<div class="change_inner">
<div class="element"><i class='fas fa-frog'></i></div>
<div class="element"><i class='fas fa-dove'></i></div>
<div class="element"><i class='fas fa-frog'></i></div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。