我有以下代碼：
/*Vertical Flip*/
.verticalFlip {
display: inline;
}
.verticalFlip span {
animation: vertical 5s linear infinite 0s;
-ms-animation: vertical 5s linear infinite 0s;
-webkit-animation: vertical 5s linear infinite 0s;
color: #ea1534;
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;
}
/*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;
}
}
/* text */
#hero h1 {
margin: 0;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: transparent;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
}<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="verticalFlip"><span>Change</span><span>Text</span></div>
</h1>
</section>這作業正常，但是，如何消除延遲？文本交替完成后有很長的停頓。我希望它是即時的，它以平滑的方式不斷交替文本。我唯一想洗掉的是長時間的停頓，就是這樣。我不確定是哪個 css 屬性導致了這個問題。有什么建議？
uj5u.com熱心網友回復：
您需要調整影片持續時間并調整關鍵幀百分比->使用變換/不透明度規則翻轉文本時的補間。
我已經稍微調整了每一個，但這歸結為您希望它的外觀和感覺如何。將翻轉影片擴展到更多的百分比（您的補間）將減少您在影片之間暫停的時間。
/*Vertical Flip*/
.verticalFlip {
display: inline;
}
.verticalFlip span {
animation: vertical 3.4s linear infinite 0s;
-ms-animation: vertical 3.4s linear infinite 0s;
-webkit-animation: vertical 3.4s linear infinite 0s;
color: #ea1534;
opacity: 0;
overflow: hidden;
position: absolute;
}
.verticalFlip span:nth-child(2) {
animation-delay: 2s;
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
}
/*Vertical Flip Animation*/
@-moz-keyframes vertical {
0% {
opacity: 0;
}
15% {
opacity: 0;
-moz-transform: rotateX(180deg);
}
35% {
opacity: 1;
-moz-transform: translateY(0px);
}
55% {
opacity: 1;
-moz-transform: translateY(0px);
}
80% {
opacity: 0;
-moz-transform: translateY(0px);
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes vertical {
0% {
opacity: 0;
}
15% {
opacity: 0;
-webkit-transform: rotateX(180deg);
}
35% {
opacity: 1;
-webkit-transform: translateY(0px);
}
55% {
opacity: 1;
-webkit-transform: translateY(0px);
}
80% {
opacity: 0;
-webkit-transform: translateY(0px);
}
95% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-ms-keyframes vertical {
0% {
opacity: 0;
}
15% {
opacity: 0;
-ms-transform: rotateX(180deg);
}
35% {
opacity: 1;
-ms-transform: translateY(0px);
}
55% {
opacity: 1;
-ms-transform: translateY(0px);
}
80% {
opacity: 0;
-ms-transform: translateY(0px);
}
95% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* text */
#hero h1 {
margin: 0;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: transparent;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
}<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="verticalFlip"><span>Change</span><span>Text</span></div>
</h1>
</section>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/402445.html
標籤：