我正在制作一个css文字滑块动画。它原本有5个项目,但我删除了一个,所以现在有4个。
我在关键帧计算上遇到了问题。当最后一个项目滑出和第一个项目再次滑回时,会有一点暂停。有5个项目的时候一切都很正常,但是去掉一个项目后,影响了时间。
HTML:
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote"> Service to 200+ countries</div>
</li>
<li class="anim2">
<div class="quote">Same day delivery services</div>
</li>
<li class="anim3">
<div class="quote">Easy booking tools.</div>
</li>
<li class="anim4">
<div class="quote">Rated great.</div>
</li>
</ul>
</div>
</div>
</div>
CSS:
html,
body {
font-family: 'Droid Serif', serif;
}
h1 {
font-size: 60px;
text-align: center;
}
.content-slider {
width: 100%;
height: 360px;
}
.slider {
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
.mask {
overflow: hidden;
height: 320px;
}
.slider ul {
margin: 0;
padding: 0;
position: relative;
}
.slider li {
width: 680px;
height: 320px;
position: absolute;
right: -325px;
list-style: none;
}
.slider .quote {
font-size: 40px;
font-style: italic;
text-align:center;
}
.slider li.anim1 {
animation: cycle 12s linear infinite;
}
.slider li.anim2 {
animation: cycle2 12s linear infinite;
}
.slider li.anim3 {
animation: cycle3 12s linear infinite;
}
.slider li.anim4 {
animation: cycle4 12s linear infinite;
}
@keyframes cycle {
0% {
right: 0px;
}
4% {
right: 0px;
}
16% {
right: 0px;
opacity: 1;
z-index: 0;
}
20% {
right: 325px;
opacity: 0;
z-index: 0;
}
21% {
right: -325px;
opacity: 0;
z-index: -1;
}
50% {
right: -325px;
opacity: 0;
z-index: -1;
}
92% {
right: -325px;
opacity: 0;
z-index: 0;
}
96% {
right: -325px;
opacity: 0;
}
100% {
right: 0px;
opacity: 1;
}
}
@keyframes cycle2 {
0% {
right: -325px;
opacity: 0;
}
16% {
right: -325px;
opacity: 0;
}
20% {
right: 0px;
opacity: 1;
}
24% {
right: 0px;
opacity: 1;
}
36% {
right: 0px;
opacity: 1;
z-index: 0;
}
40% {
right: 325px;
opacity: 0;
z-index: 0;
}
41% {
right: -325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
z-index: -1;
}
}
@keyframes cycle3 {
0% {
right: -325px;
opacity: 0;
}
36% {
right: -325px;
opacity: 0;
}
40% {
right: 0px;
opacity: 1;
}
44% {
right: 0px;
opacity: 1;
}
56% {
right: 0px;
opacity: 1;
z-index: 0;
}
60% {
right: 325px;
opacity: 0;
z-index: 0;
}
61% {
right: -325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
z-index: -1;
}
}
@keyframes cycle4 {
0% {
right: -325px;
opacity: 0;
}
56% {
right: -325px;
opacity: 0;
}
60% {
right: 0px;
opacity: 1;
}
64% {
right: 0px;
opacity: 1;
}
76% {
right: 0px;
opacity: 1;
z-index: -1;
}
80% {
right: 325px;
opacity: 0;
z-index: -1;
}
81% {
right: -325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
z-index: -1;
}
}
这是最后一个 cycle4
的动画,我试着调整了一下,但我无法像以前那样实现从最后一个到第一个的平滑过渡。
如果你想让你的动画保持12s长,那么你需要意识到,有4个项目,每个项目有3s的动画时间,每1s的动画时间是总动画时间的8.33333%。
如果你难以将这种事情可视化,我建议你建立一个电子表格或其他东西来进行计算。
你可以很容易地看到关键帧的百分比 因为你改变了参数,比如动画长度和插入时间。总之,这是一个片段。
html,
body {
font-family: 'Droid Serif', serif;
}
h1 {
font-size: 60px;
text-align: center;
}
.content-slider {
width: 100%;
height: 360px;
}
.slider {
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
.mask {
overflow: hidden;
height: 320px;
}
.slider ul {
margin: 0;
padding: 0;
position: relative;
}
.slider li {
width: 680px;
height: 320px;
position: absolute;
right: -325px;
list-style: none;
}
.slider .quote {
font-size: 40px;
font-style: italic;
text-align: center;
}
.slider li.anim1 {
animation: cycle 12s linear infinite;
}
.slider li.anim2 {
animation: cycle2 12s linear infinite;
}
.slider li.anim3 {
animation: cycle3 12s linear infinite;
}
.slider li.anim4 {
animation: cycle4 12s linear infinite;
}
@keyframes cycle {
0% {
right: -325px;
opacity: 0;
z-index: -1;
}
4.2% {
right: 0px;
opacity: 1;
z-index: 0;
}
20.8% {
right: 0px;
opacity: 1;
}
25% {
right: 325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
}
}
@keyframes cycle2 {
0% {
right: -325px;
opacity: 0;
}
25% {
right: -325px;
opacity: 0;
}
29.2% {
right: 0px;
opacity: 1;
}
45.8% {
right: 0px;
opacity: 1;
}
50% {
right: 325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
z-index: -1;
}
}
@keyframes cycle3 {
0% {
right: -325px;
opacity: 0;
}
50% {
right: -325px;
opacity: 0;
}
54.2% {
right: 0px;
opacity: 1;
}
70.8% {
right: 0px;
opacity: 1;
}
75% {
right: 325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
z-index: -1;
}
}
@keyframes cycle4 {
0% {
right: -325px;
opacity: 0;
}
74.99% {
right: -325px;
opacity: 0;
}
79.2% {
right: 0px;
opacity: 1;
}
95.8% {
right: 0px;
opacity: 1;
}
100% {
right: 325px;
opacity: 0;
z-index: -1;
}
}
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote"> Service to 200+ countries</div>
</li>
<li class="anim2">
<div class="quote">Same day delivery services</div>
</li>
<li class="anim3">
<div class="quote">Easy booking tools.</div>
</li>
<li class="anim4">
<div class="quote">Rated great.</div>
</li>
</ul>
</div>
</div>
</div>