CSS计时器分步执行动作
CSS计时器分步执行动作
提问于 2018-06-04 03:36:01
我根本不确定我所要求的能不能实现。如果不能，那就是答案。
编辑:下面的例子是一个具体的例子。然而，我的问题主要是如何循序渐进地做任何事情。
如何在没有JavaScript的情况下使用CSS分步滚动div？例如，我有一个div，它的宽度是它的容器div的3倍，我希望容器每隔几秒钟滚动一次内部的div。首先显示第一个第三个，然后显示第二个，然后显示第三个，然后返回到第一个。诸若此类。
<div style="width:100%; height:100px; overflow-y:hidden; overflow-x:auto; ">
<div style="width:300%; height:100px;">abc</div>
</div>我正在研究animation，但这似乎是为了渐进式移动。有没有办法让它像我上面概述的那样“跳跃”？
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-04 05:18:35
我不太确定这是否会有帮助，但你可以在关键帧中做百分比，以获得类似这样的东西，例如，你可以将其应用于画廊。所以这里的计时器是9除以3。
.box {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 9s infinite;
animation: mymove 9s infinite;
}
@-webkit-keyframes mymove {
0% {left: 0px;}
20%{left: 0px;}
40% {left: 100px;}
60%{left:100px;}
80%{left:200px;}
100% {left: 200px;}
}
@keyframes mymove {
0% {left: 0px;}
20%{left: 0px;}
40% {left: 100px;}
60%{left:100px;}
80%{left:200px;}
100% {left: 200px;}
}<div class="box"></div>
Stack Overflow用户
发布于 2018-06-04 05:24:39
这里，我为div设置了多个背景，以模拟更多的内容。
正如前面的回答所显示的，如果您想要的最终结果是让div滚动到下半部分，请稍等片刻，然后移动到下一个，等等，向动画添加更多断点应该可以做到。请记住，动画只是一种视觉效果。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
.parent {
width: 90%;
margin:0 auto;
height: 100px;
overflow: hidden;
position: relative;
}
.kid>* {
flex: 1;
border: 1px solid;
}
.kid {
display: flex;
position: absolute;
background: linear-gradient(to right, red, red), linear-gradient(to right, orange, orange), linear-gradient(to right, yellow, yellow);
background-position: 0% 0, 50% 0, 100% 0;
background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 100%;
background-repeat: no-repeat;
width: 300%;
height: 100px;
animation: mymove 5s infinite;
}
@keyframes mymove {
0% {
left: 0%;
}
30% {
left: 0%;
}
40% {
left: -100%;
}
60% {
left: -100%;
}
70% {
left: -200%;
}
80% {
left: -200%;
}
100% {
left: 0%;
}
}<div class="parent">
<div class="kid">
<p>I'm a P Tag</p>
<div>I'm a div Tag</div>
<h1>I'm a h1 Tag</h1>
</div>
</div>
Stack Overflow用户
发布于 2018-06-04 05:28:06
若要使动画在特定时间呈现暂停的外观，请在关键帧百分比之间保持要设置动画的属性完全相同：
0% {
color: green;
}
10% {
color: red;
}
90% {
color: red;
}
100% {
color: blue;
}以上关键帧将在完成10%时从绿色变为红色，但随后将保持红色，直到90%，给出动画正在逐步完成的外观。我们可以对你的滑动div做类似的事情：
.container {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
}
.inner {
display: flex;
width: 300%;
height: 100px;
color: white;
position: absolute;
top: 0;
left: 0;
animation: slide 9s ease infinite;
}
@keyframes slide {
0% {
left: 0;
}
25.333% {
left: 0;
}
33.333% {
left: -100%;
}
58.666% {
left: -100%;
}
66.666% {
left: -200%;
}
92% {
left: -200%;
}
100% {
left: 0;
}
}
.inner div {
width: 33.333%;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}<div class="container">
<div class="inner">
<div class="red">
A
</div>
<div class="blue">
B
</div>
<div class="green">
C
</div>
</div>
</div>
如果关键帧百分比看起来很奇怪，那是因为我将“步数”分成了相等的时间部分，即时间的三分之一。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50670278
复制相关文章
相似问题