[英]text slider using keyframes animation
I have a slider which contains 3 items, in which everything works good as I want我有一个 slider 包含 3 个项目,其中一切都如我所愿
here is live demo working demo这是现场演示工作演示
Text slider with 3 items文字 slider 含 3 件商品
HTML HTML
<span class="item-1">FAST.</span>
<span class="item-2">SIMPLE.</span>
<span class="item-3">PERSONAL.</span>
Css Css
body {
font-family: 'Open Sans', 'sans-serif';
color: #cecece;
background: #222;
overflow: hidden;
}
.item-1,
.item-2,
.item-3 {
position: absolute;
display: block;
top: 2em;
width: 60%;
font-size: 2em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.item-1 {
animation-name: anim-1;
}
.item-2 {
animation-name: anim-2;
}
.item-3 {
animation-name: anim-3;
}
@keyframes anim-1 {
0%,
8.3% {
top: -100%;
opacity: 0;
}
8.3%,
25% {
top: 25%;
opacity: 1;
}
33.33%,
100% {
top: 110%;
opacity: 0;
}
}
@keyframes anim-2 {
0%,
33.33% {
top: -100%;
opacity: 0;
}
41.63%,
58.29% {
top: 25%;
opacity: 1;
}
66.66%,
100% {
top: 110%;
opacity: 0;
}
}
@keyframes anim-3 {
0%,
66.66% {
top: -100%;
opacity: 0;
}
74.96%,
91.62% {
top: 25%;
opacity: 1;
}
100% {
top: 110%;
opacity: 0;
}
}
Now I want to two more items to the slider现在我想向 slider 再添加两个项目
HTML HTML
<span class="item-1">FAST.</span>
<span class="item-2">SIMPLE.</span>
<span class="item-3">PERSONAL.</span>
<span class="item-4">SOCIAL.</span>
<span class="item-5">LOUD.</span>
Css Css
body {
font-family: 'Open Sans', 'sans-serif';
color: #cecece;
background: #222;
overflow: hidden;
}
.item-1,
.item-2,
.item-3,
.item-4,
.item-5{
position: absolute;
display: block;
top: 2em;
width: 60%;
font-size: 2em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.item-1 {
animation-name: anim-1;
}
.item-2 {
animation-name: anim-2;
}
.item-3 {
animation-name: anim-3;
}
.item-4{
animation-name: anim-4;
}
.item-5{
animation-name: anim-5;
}
@keyframes anim-1 {
0%,
6.3% {
top: -100%;
opacity: 0;
}
6.3%,
25% {
top: 25%;
opacity: 1;
}
13.33%,
100% {
top: 110%;
opacity: 0;
}
}
@keyframes anim-2 {
0%,
23.33% {
top: -100%;
opacity: 0;
}
31.63%,
48.29% {
top: 25%;
opacity: 1;
}
56.66%,
100% {
top: 110%;
opacity: 0;
}
}
@keyframes anim-3 {
0%,
56.66% {
top: -100%;
opacity: 0;
}
64.96%,
71.62% {
top: 25%;
opacity: 1;
}
100% {
top: 110%;
opacity: 0;
}
}
@keyframes anim-4 {
0%,
71.66% {
top: -100%;
opacity: 0;
}
84.96%,
91.62% {
top: 25%;
opacity: 1;
}
100% {
top: 110%;
opacity: 0;
}
}
@keyframes anim-5 {
0%,
84.96% {
top: -100%;
opacity: 0;
}
94.96%,
91.62% {
top: 25%;
opacity: 1;
}
100% {
top: 110%;
opacity: 0;
}
}
Here is demo with five items这是包含五个项目的演示
What do I need to change in my code?我需要在我的代码中更改什么?
The problem is due to messed up percentage on the five different animations.问题是由于五个不同动画的百分比混乱造成的。
Why not re-use the same animation, something like:为什么不重新使用相同的 animation,例如:
@keyframes anim {
0%, 33.33% {
top: -100%;
opacity: 0;
}
33.33%, 50% {
top: 25%;
opacity: 1;
}
50%, 100% {
top: 110%;
opacity: 0;
}
}
and then apply an animation-delay
on each span
, something like:然后在每个
span
上应用animation-delay
,例如:
.item-1 { animation-delay: 0s }
.item-2 { animation-delay: 4s }
.item-3 { animation-delay: 8s }
.item-4{ animation-delay: 12s }
.item-5{ animation-delay: 16s }
Here is a working example.这是一个工作示例。
Tip keep in mind that animating top
value is not the best choice in terms of performance.提示请记住,就性能而言,动画
top
值并不是最佳选择。 Try always to animate transform
and opacity
values when possible.尽可能尝试为
transform
和opacity
值设置动画。
body { font-family: 'Open Sans', 'sans-serif'; color: #cecece; background: #222; overflow: hidden; }.item-1, .item-2, .item-3, .item-4, .item-5{ position: absolute; display: block; top: -100%; width: 60%; opacity: 0; font-size: 2em; animation-duration: 15s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-name: anim-all; }.item-1 { animation-delay: 0s }.item-2 { animation-delay: 3s }.item-3 { animation-delay: 6s }.item-4{ animation-delay: 9s }.item-5{ animation-delay: 12s } @keyframes anim-all { 0%, 33.33% { top: -100%; opacity: 0; } 33.33%, 50% { top: 25%; opacity: 1; } 50%, 100% { top: 110%; opacity: 0; } }
<body> <span class="item-1">FAST.</span> <span class="item-2">SIMPLE.</span> <span class="item-3">PERSONAL.</span> <span class="item-4">SOCIAL.</span> <span class="item-5">LOUD.</span> </body>
body { font-family: 'Open Sans', 'sans-serif'; color: #cecece; background: #222; overflow: hidden; }.item-1, .item-2, .item-3, .item-4, .item-5{ position: absolute; display: block; top: -100%; width: 60%; opacity: 0; font-size: 2em; animation-duration: 20s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-name: anim-all; }.item-1 { animation-delay: 0s }.item-2 { animation-delay: 4.25s }.item-3 { animation-delay: 8.50s }.item-4{ animation-delay: 12.75s }.item-5{ animation-delay: 17s } @keyframes anim-all { 0%, 33.33% { top: -100%; opacity: 0; } 33.33%, 50% { top: 25%; opacity: 1; } 50%, 100% { top: 110%; opacity: 0; } }
<body> <span class="item-1">FAST.</span> <span class="item-2">SIMPLE.</span> <span class="item-3">PERSONAL.</span> <span class="item-4">SOCIAL.</span> <span class="item-5">LOUD.</span> </body>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.