多文本动画循环
问题描述：
我看到这个项目，我一直在尝试使动画迭代计数：无限，但每次我尝试文本重叠时，我想到的是让文本每次重复一次时间停止在文本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>
答
这似乎工作：
@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。
试试这个属性animation-iteration-count：infinite; –
每次我尝试这个文本重叠，它是不可读的。 –
你需要调整时间和延迟 –