如何减慢CSS动画文本过渡的速度？ [英] How can I slow down my CSS Animated Text transitions?
本文介绍了如何减慢CSS动画文本过渡的速度？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个句子，句子之间有一组单词，这些单词经过动画处理以淡入淡出过渡。但是现在单词正在快速过渡，我似乎无法调整速度。
I created a sentence with a group of words in between that are animated to fade transition one after the other. But now the words are transitioning rapidly, and I can't seem to adjust the speed.
到目前为止，我已经尝试过更改属性：动画延迟：-8秒；
在所有span：childs上使用，但这不会改变
过渡的速度。我也尝试过更改属性动画：
个元素10s无限线性； 没有运气。
我是CSS3动画的新手，我需要帮助来理解：
I'm failrly new to CSS3 animations, and I need help in understanding:
- 如何减慢CSS动画的过渡？
- 如何控制速度？
代码（ https://jsfiddle.net/qgrvaqfg/1/ ）：
The Code (https://jsfiddle.net/qgrvaqfg/1/):
.sentence {
display: inline-block;
overflow: hidden;
height: 2em;
vertical-align: top;
}
.sentence p {
display: inline-block;
}
.slidingVertical {
display: inline-block;
vertical-align: text-top;
}
.slidingVertical span {
display: block;
height: 40px;
margin-bottom: -40px;
overflow: hidden;
}
.slidingVertical span {
animation: elements 10s infinite linear;
}
.slidingVertical span:nth-child(1) {
animation-delay: -8s;
}
.slidingVertical span:nth-child(2) {
animation-delay: -9s;
}
.slidingVertical span:nth-child(3) {
animation-delay: -10s;
}
.slidingVertical span:nth-child(4) {
animation-delay: -11s;
}
.slidingVertical span:nth-child(5) {
animation-delay: -12s;
}
.slidingVertical span:nth-child(6) {
animation-delay: -13s;
}
.slidingVertical span:nth-child(7) {
animation-delay: -14s;
}
.slidingVertical span:nth-child(8) {
animation-delay: -15s;
}
.slidingVertical span:nth-child(9) {
animation-delay: -16s;
}
.slidingVertical span:nth-child(10) {
animation-delay: -17s;
}
@keyframes elements {
0% {
opacity: 0;
max-width: 10px;
}
5%, 10% {
opacity: 1;
max-width: 400px;
}
15%, 100% {
opacity: 0;
max-width: 10px;
}
}
<body>
<section class="wrapper">
<h2 class="sentence">Janie is a lovely girl because she is
<div class="slidingVertical">
<span>amazing</span>
<span>beautiful</span>
<span>cute</span>
<span>honest</span>
<span>cool</span>
<span>brave</span>
<span>wild</span>
<span>interesting</span>
<span>local</span>
<span>sexy</span>
</div>
<p>
and cool.
</p>
</h2>
</section>
</body>
推荐答案
我想这就是您要寻找的结果：
I guess that's the result that youre looking for:
.slidingVertical span 与 opacity：0 加上 max-width：10px ，每个单词的延迟时间从0到9）：
.slidingVertical span with opacity:0 plus max-width:10px and each word with a positive delay from 0 to 9):
body {
background: pink;
}
.sentence {
display: inline-block;
overflow: hidden;
height: 2em;
vertical-align: top;
}
.sentence p {
display: inline-block;
}
.slidingVertical {
display: inline-block;
vertical-align: text-top;
}
.slidingVertical span {
display: block;
height: 40px;
margin-bottom: -40px;
overflow: hidden;
}
.slidingVertical span {
animation: elements 20s infinite linear;
opacity: 0;
max-width: 10px;
}
.slidingVertical span:nth-child(1) { animation-delay: 0s; } .slidingVertical span:nth-child(2) { animation-delay: 2s; } .slidingVertical span:nth-child(3) { animation-delay: 4s; } .slidingVertical span:nth-child(4) { animation-delay: 6s; } .slidingVertical span:nth-child(5) { animation-delay: 8s; } .slidingVertical span:nth-child(6) { animation-delay: 10s; } .slidingVertical span:nth-child(7) { animation-delay: 12s; } .slidingVertical span:nth-child(8) { animation-delay: 14s; } .slidingVertical span:nth-child(9) { animation-delay: 16s; } .slidingVertical span:nth-child(10) { animation-delay: 18s; }
@keyframes elements {
0% {
opacity: 0;
max-width: 10px;
}
6%, 9% {
opacity: 1;
max-width: 400px;
}
12%, 100% {
opacity: 0;
max-width: 10px;
}
}
<section class="wrapper">
<h2 class="sentence">Janie is a lovely girl because she is
<div class="slidingVertical">
<span>amazing</span>
<span>beautiful</span>
<span>cute</span>
<span>honest</span>
<span>cool</span>
<span>brave</span>
<span>wild</span>
<span>interesting</span>
<span>local</span>
<span>sexy</span>
</div>
<p>and cool.</p>
</h2>
</section>
或者，我的确重建了动画，使其易于控制其速度。在以下示例中，您只需要更改动画长度值（ animation：elements 30s infinite linear; ）即可控制动画的速度（每个单词没有单独的延迟）。
Alternatively, I did rebuild the animation in a way to let it easier to control it's velocity. On the following example you just need to change the animation lenght value (animation: elements 30s infinite linear;) to control it's speed (there is no individual delay on each word).
body {
background: plum;
}
.sentence {
display: inline-block;
overflow: hidden;
height: 80px;
vertical-align: top;
}
.sentence p {
display: inline-block;
}
.slidingVertical {
display: inline-block;
vertical-align: text-top;
}
.slidingVertical span {
display: block;
height: 40px;
margin-bottom: -40px;
overflow: hidden;
}
.slidingVertical span:before {
content: '';
opacity: 1;
display: inline-block;
max-width: 10px;
overflow: hidden;
animation: elements 30s infinite linear;
}
@keyframes elements {
0% {
content: 'sexy';
opacity: 1;
max-width: 400px;
}
4% {
content: 'sexy';
opacity: 1;
max-width: 400px;
}
5% {
content: 'sexy';
opacity: 0;
max-width: 10px;
}
6% {
content: 'amazing';
opacity: 0;
max-width: 10px;
}
10% {
content: 'amazing';
opacity: 1;
max-width: 400px;
}
14% {
content: 'amazing';
opacity: 1;
max-width: 400px;
}
15% {
content: 'amazing';
opacity: 0;
max-width: 10px;
}
16% {
content: 'beautiful';
opacity: 0;
max-width: 10px;
}
20% {
content: 'beautiful';
opacity: 1;
max-width: 400px;
}
24% {
content: 'beautiful';
opacity: 1;
max-width: 400px;
}
25% {
content: 'beautiful';
opacity: 0;
max-width: 10px;
}
26% {
content: 'cute';
opacity: 0;
max-width: 10px;
}
30% {
content: 'cute';
opacity: 1;
max-width: 400px;
}
34% {
content: 'cute';
opacity: 1;
max-width: 400px;
}
35% {
content: 'cute';
opacity: 0;
max-width: 10px;
}
36% {
content: 'honest';
opacity: 0;
max-width: 10px;
}
40% {
content: 'honest';
opacity: 1;
max-width: 400px;
}
44% {
content: 'honest';
opacity: 1;
max-width: 400px;
}
45% {
content: 'honest';
opacity: 0;
max-width: 10px;
}
46% {
content: 'cool';
opacity: 0;
max-width: 10px;
}
50% {
content: 'cool';
opacity: 1;
max-width: 400px;
}
54% {
content: 'cool';
opacity: 1;
max-width: 400px;
}
55% {
content: 'cool';
opacity: 0;
max-width: 10px;
}
56% {
content: 'brave';
opacity: 0;
max-width: 10px;
}
60% {
content: 'brave';
opacity: 1;
max-width: 400px;
}
64% {
content: 'brave';
opacity: 1;
max-width: 400px;
}
65% {
content: 'brave';
opacity: 0;
max-width: 10px;
}
66% {
content: 'wild';
opacity: 0;
max-width: 10px;
}
70% {
content: 'wild';
opacity: 1;
max-width: 400px;
}
74% {
content: 'wild';
opacity: 1;
max-width: 400px;
}
75% {
content: 'wild';
opacity: 0;
max-width: 10px;
}
76% {
content: 'interesting';
opacity: 0;
max-width: 10px;
}
80% {
content: 'interesting';
opacity: 1;
max-width: 400px;
}
84% {
content: 'interesting';
opacity: 1;
max-width: 400px;
}
85% {
content: 'interesting';
opacity: 0;
max-width: 10px;
}
86% {
content: 'local';
opacity: 0;
max-width: 10px;
}
90% {
content: 'local';
opacity: 1;
max-width: 400px;
}
94% {
content: 'local';
opacity: 1;
max-width: 400px;
}
95% {
content: 'local';
opacity: 0;
max-width: 10px;
}
96% {
content: 'sexy';
opacity: 0;
max-width: 10px;
}
100% {
content: 'sexy';
opacity: 1;
max-width: 400px;
}
}
<section class="wrapper">
<h2 class="sentence">Janie is a lovely girl because she is
<div class="slidingVertical">
<span></span>
</div>
<p>and cool.</p>
</h2>
</section>
这篇关于如何减慢CSS动画文本过渡的速度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
