css - @keyframes 无限循环
问题描述
我有一个垂直动画图标的问题,以便它们无限地相互改变。
问题是我有两个图标,我需要它们改变方式(第一个图标 - 青蛙,第二个图标 - 鸟)1 -> 2 -> 1 -> 2 这样看起来就像一个完整的循环在一个方向(底部),我现在拥有的是第一个图标到第二个图标根据需要更改,然后我的动画返回到第一个图标向后而不是向前。
这是代码笔
如果有人可以帮助我,我会很高兴。
@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>
推荐阅读
- java - Maven - 多模块项目 - 如何配置/控制插件执行顺序
- java - 如何排除 java.activation?
- amazon-web-services - 通过 ECS 运行 docker 镜像是否需要 PM2?
- sql - PostgreSQL - 用于管理器层次结构的递归 CTE 自联接
- javascript - 使用reduce方法进行管道
- php - 如何计算每个循环的总和结束?
- python - 下载“.eml”文件时无法摆脱“保留/丢弃”通知
- file - 文件、未命名管道、命名管道和套接字
- ms-access - 当别名包含某些字符时,UCanAccess 出现“意外令牌”错误
- python - 向列表中的字典添加新键