css - CSS老虎机风格动画:如何使其平滑并在一定时间后停止?
问题描述
我正在尝试在 CSS 中开发循环老虎机风格的动画,但我不确定如何让它平滑过渡。
.scrollable {
height: 150px;
width: 150px;
margin: 0 auto;
padding: 0;
background: #000;
overflow: hidden;
}
.items {
-webkit-animation: scroll 5s infinite;
-moz-animation: scroll 5s infinite;
-ms-animation: scroll 5s infinite;
}
.number {
color: #ffffff;
font-size: 36px;
padding-bottom: 28px;
position: relative;
top: 20px;
}
@-webkit-keyframes scroll {
0% {
margin-top: 0;
}
27.33% {
margin-top: 0;
}
33.33% {
margin-top: -50px;
}
60.66% {
margin-top: -50px;
}
66.66% {
margin-top: -100px;
}
94.99% {
margin-top: -100px;
}
100% {
margin-top: 0;
}
}
@-moz-keyframes scroll {
0% {
margin-top: 0;
}
27.33% {
margin-top: 0;
}
33.33% {
margin-top: -50px;
}
60.66% {
margin-top: -50px;
}
66.66% {
margin-top: -100px;
}
94.99% {
margin-top: -100px;
}
100% {
margin-top: 0;
}
}
@-ms-keyframes scroll {
0% {
margin-top: 0;
}
27.33% {
margin-top: 0;
}
33.33% {
margin-top: -50px;
}
60.66% {
margin-top: -50px;
}
66.66% {
margin-top: -100px;
}
94.99% {
margin-top: -100px;
}
100% {
margin-top: 0;
}
}
<div class="scrollable">
<div class="items">
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="number">1</div>
<div class="number">2</div>
</div>
</div>
我怎样才能让它看起来像一个无限循环,而不是像现在这样跳回到开头?另外,我怎样才能让循环在一定时间后停止,比如 30 秒?
解决方案
不确定这是否有帮助,但您可以通过content
更改进行无限循环。animation-iteration-count
此外,您可以使用属性在某些循环后停止它。我试图让它发挥作用。
请参阅下面的片段:
.scrollable {
height: 80px;
width: 150px;
margin: 0 auto;
padding: 0;
background: #000;
overflow: hidden;
}
.items{
width: 0;
word-break: break-all;
word-wrap:break-word;
white-space: pre-line;
}
.items::before {
content:"1 2 3";
color: #ffffff;
font-size: 36px;
-webkit-animation: scroll 5s infinite;
-moz-animation: scroll 5s infinite;
-ms-animation: scroll 5s infinite;
-webkit-animation-iteration-count: 5;
}
@-webkit-keyframes scroll {
0% {
content:"1 2 3";
}
27.33% {
content:"1 2 3";
}
33.33% {
content:"2 3 1";
}
60.66% {
content:"2 3 1";
}
66.66% {
content:"3 1 2";
}
94.99% {
content:"3 1 2";
}
100% {
content:"1 2 3";
}
}
<div class="scrollable">
<div class="items">
</div>
</div>
推荐阅读
- ios - 将焦点从 UITextView 更改为 UITextField 会破坏约束
- python - 在 Python 中使用权重拟合对数正态分布的正确方法
- sql - 使用子查询和联接的 SQL 查询性能
- excel - VBA,格式化/未知问题导致 vba 无法工作
- dataset - 用于物体检测和分类的 kitti 数据集 3D 激光雷达点云数据
- mysql - 在 Rails 中使用英语模型和西班牙语数据库
- python - Python:根据位置、括号和括号从列表中获取每个元素
- javascript - 我可以使用中继更新器配置来更新简单的 graphQL 列表吗?
- ios - iPhoneX上的奇屏动画恢复应用
- c++ - 读取目录中的多个文件进行编辑和写入另一组文件