我是CSS3中文本动画的新手，有两个问题我不太清楚
问题1:我一直试图在我的动画文本旁边浮动一个常规单词，这样就可以用一个句子表达了。动画单词将靠近句子的末尾，并根据单词的长度占用所需的空间。
珍妮是一个可爱的女孩，因为她（动画文本）和酷
问题2:我的第二期开始时，我为总共12个动画单词添加了额外的单词。这导致了一个单词重叠的循环问题。我不确定在关键帧方面应该改变什么，以使单词都按照预期的方式循环。
在这一点上，任何正确的帮助或推动都将非常有帮助。这是小提琴
提前感谢！
HTML:
<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>
<span>intelligent</span>
<span>exotic</span>
</div>
<p>
and cool.
</p>
</h2>
</section>
CSS:
/*Heading1*/
h1{
color: #fff;
font-size: 44px;
margin-top: 40px;
text-align: center;
}
/*Sentence*/
.sentence{
color: #222;
font-size: 30px;
text-align: left;
}
/*Wrapper*/
.wrapper{
font-family: 'Raleway', sans-serif;
margin: 100px auto;
padding: 40px 40px;
position: relative;
width: 70%;
}
/*Vertical Sliding*/
.slidingVertical{
display: inline;
text-indent: 8px;
}
.slidingVertical span{
animation: topToBottom 10.5s linear infinite 0s;
-ms-animation: topToBottom 10.5s linear infinite 0s;
-webkit-animation: topToBottom 10.5s linear infinite 0s;
color: #000;
opacity: 0;
overflow: hidden;
position: absolute;
}
.slidingVertical span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5){
animation-delay: 12s;
-ms-animation-delay: 12s;
-webkit-animation-delay: 12s;
}
/*topToBottom Animation*/
@-moz-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(-50px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(-50px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(-50px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*Horizontal Sliding*/
.slidingHorizontal{
display: inline;
text-indent: 8px;
}
.slidingHorizontal span{
animation: leftToRight 12.5s linear infinite 0s;
-ms-animation: leftToRight 12.5s linear infinite 0s;
-webkit-animation: leftToRight 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.slidingHorizontal span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingHorizontal span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.slidingHorizontal span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.slidingHorizontal span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*leftToRight Animation*/
@-moz-keyframes leftToRight{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateX(-50px); }
10% { opacity: 1; -moz-transform: translateX(0px); }
25% { opacity: 1; -moz-transform: translateX(0px); }
30% { opacity: 0; -moz-transform: translateX(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes leftToRight{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateX(-50px); }
10% { opacity: 1; -webkit-transform: translateX(0px); }
25% { opacity: 1; -webkit-transform: translateX(0px); }
30% { opacity: 0; -webkit-transform: translateX(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes leftToRight{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateX(-50px); }
10% { opacity: 1; -ms-transform: translateX(0px); }
25% { opacity: 1; -ms-transform: translateX(0px); }
30% { opacity: 0; -ms-transform: translateX(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*FadeIn*/
.fadeIn{
display: inline;
text-indent: 8px;
}
.fadeIn span{
animation: fadeEffect 12.5s linear infinite 0s;
-ms-animation: fadeEffect 12.5s linear infinite 0s;
-webkit-animation: fadeEffect 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.fadeIn span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.fadeIn span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.fadeIn span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(0px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(0px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*Vertical Flip*/
.verticalFlip{
display: inline;
text-indent: 8px;
}
.verticalFlip span{
animation: vertical 12.5s linear infinite 0s;
-ms-animation: vertical 12.5s linear infinite 0s;
-webkit-animation: vertical 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.verticalFlip span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.verticalFlip span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.verticalFlip span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.verticalFlip span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*Vertical Flip Animation*/
@-moz-keyframes vertical{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotateX(180deg); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
@-webkit-keyframes vertical{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotateX(180deg); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes vertical{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotateX(180deg); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*Horizontal Flip*/
.horizontalFlip{
display: inline;
text-indent: 8px;
}
.horizontalFlip span{
animation: horizontal 12.5s linear infinite 0s;
-ms-animation: horizontal 12.5s linear infinite 0s;
-webkit-animation: horizontal 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.horizontalFlip span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.horizontalFlip span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.horizontalFlip span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.horizontalFlip span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*Horizontal Flip Animation*/
@-moz-keyframes horizontal{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotateY(180deg); }
10% { opacity: 1; -moz-transform: translateX(0px); }
25% { opacity: 1; -moz-transform: translateX(0px); }
30% { opacity: 0; -moz-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
@-webkit-keyframes horizontal{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotateY(180deg); }
10% { opacity: 1; -webkit-transform: translateX(0px); }
25% { opacity: 1; -webkit-transform: translateX(0px); }
30% { opacity: 0; -webkit-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes horizontal{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotateY(180deg); }
10% { opacity: 1; -ms-transform: translateX(0px); }
25% { opacity: 1; -ms-transform: translateX(0px); }
30% { opacity: 0; -ms-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*AntiClockWise Effect*/
.antiClock{
display: inline;
text-indent: 8px;
}
.antiClock span{
animation: anti 12.5s linear infinite 0s;
-ms-animation: anti 12.5s linear infinite 0s;
-webkit-animation: anti 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.antiClock span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.antiClock span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.antiClock span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.antiClock span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*AntiClockWise Effect Animation*/
@-moz-keyframes anti{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotateX(180deg); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
@-webkit-keyframes anti{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotate(180deg); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes anti{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotate(180deg); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*ClockWise Effect*/
.clockWise{
display: inline;
text-indent: 8px;
}
.clockWise span{
animation: clock 12.5s linear infinite 0s;
-ms-animation: clock 12.5s linear infinite 0s;
-webkit-animation: clock 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.clockWise span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.clockWise span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.clockWise span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.clockWise span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
.clockWise span:nth-child(6){
animation-delay: 11s;
-ms-animation-delay: 11s;
-webkit-animation-delay: 11s;
}
/*ClockWise Effect Animation*/
@-moz-keyframes clock{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotate(-180deg); }
10% { opacity: 1; -moz-transform: translateX(0px); }
25% { opacity: 1; -moz-transform: translateX(0px); }
30% { opacity: 0; -moz-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
@-webkit-keyframes clock{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotate(-180deg); }
10% { opacity: 1; -webkit-transform: translateX(0px); }
25% { opacity: 1; -webkit-transform: translateX(0px); }
30% { opacity: 0; -webkit-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes clock{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotate(-180deg); }
10% { opacity: 1; -ms-transform: translateX(0px); }
25% { opacity: 1; -ms-transform: translateX(0px); }
30% { opacity: 0; -ms-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*Pop Effect*/
.popEffect{
display: inline;
text-indent: 8px;
}
.popEffect span{
animation: pop 12.5s linear infinite 0s;
-ms-animation: pop 12.5s linear infinite 0s;
-webkit-animation: pop 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.popEffect span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.popEffect span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.popEffect span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.popEffect span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*Pop Effect Animation*/
@-moz-keyframes pop{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
@-webkit-keyframes pop{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);}
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes pop{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*Push Effect*/
.pushEffect{
display: inline;
text-indent: 8px;
}
.pushEffect span{
animation: push 12.5s linear infinite 0s;
-ms-animation: push 12.5s linear infinite 0s;
-webkit-animation: push 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.pushEffect span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.pushEffect span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.pushEffect span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.pushEffect span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*Push Effect Animation*/
@-moz-keyframes push{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); }
10% { opacity: 1; -moz-transform: translateX(0px); }
25% { opacity: 1; -moz-transform: translateX(0px); }
30% { opacity: 0; -moz-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
@-webkit-keyframes push{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform:rotate(0deg) scale(2) skew(0deg) translate(0px);}
10% { opacity: 1; -webkit-transform: translateX(0px); }
25% { opacity: 1; -webkit-transform: translateX(0px); }
30% { opacity: 0; -webkit-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes push{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); }
10% { opacity: 1; -ms-transform: translateX(0px); }
25% { opacity: 1; -ms-transform: translateX(0px); }
30% { opacity: 0; -ms-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*Footer*/
h3{
color: #fff;
font-size: 30px;
margin-top: 20px;
text-align: center;
}
您需要将所有主要元素设置为内联。
例外情况是跨度，它需要被阻塞才能使容器自动调整。
动画需要在时间上重叠。
.sentence {
display: inline-block;
verflow: hidden;
height: 2em;
vertical-align: top;
}
.sentence p {
display: inline-block;
}
.slidingVertical {
display: inline-block;
vertical-align: text-top;
}
.slidingVertical span {
display: block;
height: 30px;
margin-bottom: -30px;
overflow: hidden;
}
.slidingVertical span {
animation: elements 10s infinite linear;
}
.slidingVertical span:nth-child(1) {
animation-delay: -1s;
}
.slidingVertical span:nth-child(2) {
animation-delay: -2s;
}
.slidingVertical span:nth-child(3) {
animation-delay: -3s;
}
.slidingVertical span:nth-child(4) {
animation-delay: -4s;
}
.slidingVertical span:nth-child(5) {
animation-delay: -5s;
}
.slidingVertical span:nth-child(6) {
animation-delay: -6s;
}
.slidingVertical span:nth-child(7) {
animation-delay: -7s;
}
.slidingVertical span:nth-child(8) {
animation-delay: -8s;
}
.slidingVertical span:nth-child(9) {
animation-delay: -9s;
}
.slidingVertical span:nth-child(10) {
animation-delay: -10s;
}
@keyframes elements {
0% {
opacity: 0;
max-width: 10px;
}
5%, 10% {
opacity: 1;
max-width: 400px;
}
15%, 100% {
opacity: 0;
max-width: 10px;
}
}<section class="wrapper">
<h2 class="sentence">Janie is a
<div class="slidingVertical">
<span>cute</span>
<span>wild</span>
<span>amazingly cute</span>
<span>very beatiful and amazingly cute</span>
<span>beautiful</span>
<span>honest</span>
<span>cool</span>
<span>brave</span>
<span>interesting</span>
<span>local</span>
</div>
<p>girl</p>
</h2>
</section>