多文本動畫循環

我看到這個項目，我一直在嘗試使動畫迭代計數：無限，但每次我嘗試文本重疊時，我想到的是讓文本每次重複一次時間停止在文本3.多文本動畫循環

@import 'https://fonts.googleapis.com/css?family=Baloo+Paaji'; 
 

 
$primary-color: #1e90ff; 
 
$secondary-color: #ffe221; 
 
$tertiary-color: #ffffff; 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    font-family: 'Baloo Paaji', cursive; 
 
    background: #1e90ff; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    height: 220px; 
 
    position: relative; 
 
} 
 

 
#color { 
 
\t color: #ffe221; 
 
} 
 

 
h1, h2 { 
 
    font-size: 75px; 
 
    text-transform: uppercase;} 
 

 
    span { 
 
    width: 100%; 
 
    float: left; 
 
    color: #ffffff; 
 
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%); 
 
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%); 
 
    transform: translateY(-50px); 
 
    opacity: 0; 
 
    animation-name: titleAnimation; 
 
    animation-timing-function: ease; 
 
    animation-duration: 3s; 
 

 

 
    } 
 

 
h1 span { 
 
    animation-delay: 0.6s; 
 
    -webkit-animation-fill-mode: forwards;} 
 

 
    &:first-child { 
 
    animation-delay: 0.7s; 
 
    } 
 

 
    &:last-child { 
 
    color: #ffe221; 
 
    animation-delay: 0.5s; 
 
    } 
 
} 
 
.title { 
 
\t margin: -4em 0 0 0; 
 
} 
 
h2 { 
 
    top: 0; 
 
    position: absolute;} 
 

 
    span { 
 
    animation-delay: 4.1s; 
 
    -webkit-animation-fill-mode: forwards;} 
 

 
    &:first-child { 
 
     animation-delay: 4.2s; 
 
    } 
 

 
    &:last-child { 
 
     color: #ffe221; 
 
     animation-delay: 4s; 
 
    } 
 

 
h2 { 
 
    top: 0; 
 
    position: absolute;} 
 

 
.slide-two{ 
 
    animation-delay: 8.1s; 
 
    -webkit-animation-fill-mode: forwards;} 
 

 
    &:first-child { 
 
     animation-delay: 8.2s; 
 
    } 
 

 
    &:last-child { 
 
     color: #ffe221; 
 
     animation-delay: 8s; 
 
    } 
 
    
 

 

 

 
@keyframes titleAnimation { 
 
    0% { 
 
    transform: translateY(-50px); 
 
    opacity: 0; 
 
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%); 
 
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%); 
 
    } 
 
    20% { 
 
    transform: translateY(0); 
 
    opacity: 1; 
 
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%); 
 
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%); 
 
    } 
 
    80% { 
 
    transform: translateY(0); 
 
    opacity: 1; 
 
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%); 
 
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%); 
 
    } 
 
    100% { 
 
    transform: translateY(50px); 
 
    opacity: 0; 
 
    -webkit-clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%); 
 
    clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%); 
 
    } 
 
}

<html> 
 
<head> 
 
\t <link rel="stylesheet" type="text/css" href="main.css"> 
 
</head> 
 
<body> 
 

 
<section class="container"> 
 
    <h1 class="title"> 
 
    <span>this is </span> 
 
    <span id="color">text one</span> 
 
    </h1> 
 
    
 
    <h2 class="title"> 
 
    <span>and</span> 
 
    <span>this is <em id="color">text</em></span> 
 
    <span>two</span> 
 
    </h2> 
 

 
    <h2 class="slidetwo"> 
 
    <span class="slide-two">while this </span> 
 
    <span id="color" class="slide-two">is</span> 
 
    <span class="slide-two">text three</span> 
 
    </h2> 
 
</section> 
 

 

 
</body> 
 
</html>

來源

2017-07-14 Sherif Galal

試試這個屬性animation-iteration-count：infinite; –

每次我嘗試這個文本重疊，它是不可讀的。 –

你需要調整時間和延遲 –

這似乎工作：

@import 'https://fonts.googleapis.com/css?family=Baloo+Paaji'; 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    font-family: 'Baloo Paaji', cursive; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    height: 220px; 
 
    position: relative; 
 
} 
 

 
.container>div { 
 
    font-size: 75px; 
 
    text-transform: uppercase; 
 
    color: #ffe221; 
 
    opacity: 0; 
 
    height: 0px; 
 
    } 
 
.container>div:nth-child(1){ 
 
    animation: animation 12s infinite; 
 
} 
 
.container>div:nth-child(2){ 
 
    animation: animation 12s infinite; 
 
    animation-delay: 4s; 
 
} 
 
.container>div:nth-child(3){ 
 
    animation: animation 12s infinite; 
 
    animation-delay: 8s; 
 
} 
 
@keyframes animation { 
 
    0% {opacity: 0; height: auto;} 
 
    16% {opacity: 1;} 
 
    33% {opacity: 0; height: 0px;} 
 
    100% {opacity: 0; height: 0px;} 
 
} 
 

 
}

<html> 
 
<head> 
 
\t <link rel="stylesheet" type="text/css" href="main.css"> 
 
</head> 
 
<body> 
 

 
<section class="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
</section> 
 

 

 
</body> 
 
</html>

我簡化了一下這個例子。缺點是你需要知道你想爲此設置動畫的div的數量。

我們有3個div我們將單獨動畫，所以我們要「重疊」3個動畫。當其他動畫運行時，其他動畫會暫停。因此，我們計算1/3動畫時間（33％）和2/3延遲（33％ - 100％），而其他動畫運行。
每個元素將通過使用：nth-child（）選擇器獲取自己的動畫。
我們不希望動畫在同一時間運行，所以我們將第三個元素的第二個元素和2/3動畫時間的動畫時間添加1/3的動畫延遲。

PS：雖然這個工作，你需要知道你有div的數量，你不能使用display：none。在我看來，使用jQuery來做到這一點可能會更容易。或者可能是jQuery和轉換的組合。這將允許您使用display：none並使用可變數量的div。

來源

2017-07-14 12:27:50 RMo

多文本動畫循環

回答

相關問題