在我的网站中,我希望有一个淡入淡出的标题,然后使用不同的文本,然后输出,然后恢复正常(循环).以下是我希望它的工作方式:

h1 {
    font-size: 600%;
    animation-name: head;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
@keyframes head {
0% {font-size:600%; opacity:1;}
25% {font-size:570%; opacity:0;}
50% {font-size:600%; opacity:1;}
65% {font-size:570%; opacity:0;}
80% {font-size:600%; opacity:1; innerHtml="Changed Text"}
90% {font-size:570%; opacity:0;}
100% {font-size:600%;opacity:1; innerHtml="Original Text"}
}

但是,我还没有找到任何方法来改变CSS3动画中的文本.这可能吗？

有两种方法可以做到这一点.一种是通过伪元素管理内容.这意味着显示的内容将应用于CSS; 像这样:

h1:before{
    content: 'Original Text';
    font-size: 600%;
    animation-name: head;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes head {
    0% {font-size:600%; opacity:1;}
    25% {font-size:570%; opacity:0;}
    50% {font-size:600%; opacity:1;}
    65% {font-size:570%; opacity:0;}
    80% {font-size:600%; opacity:1; content: "Changed Text"}
    90% {font-size:570%; opacity:0;}
    100% {font-size:600%;opacity:1; content: "Original Text"}
}

另一种方法是通过在HTML中包含两个元素并在它们之间切换.您需要两个动画才能共同完成此操作,或者您可能只能偏移一个动画,如下所示:

    
Original Text
    
Changed Text

.headtext{
    font-size: 600%;
    animation-name: head;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

#text2{
    animation-delay: 2s;
}

@keyframes head {
    0% {font-size:600%; opacity:1;}
    50% {font-size:0; opacity:0;}
    100% {font-size:600%;opacity:1;}
}

我已经缩小了font-size以便0为其他文本提供空间.这可能与您想要的效果不同.