I have an animation that needs looped. I know I have to use animation-iteration-count: infinite
. But, I don't know where to put it. Code below. Every time I use it, it doesn't work. Putting it in the keyframe, or normal css doesn't do anything. If I put it inside the animation, it just overlaps each other to make a huge mess.
ul {
background-color: cadetblue;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
display: inline;
margin-right: 10px;
float: left;
}
a {
display: block;
padding: 8px;
background-color: cadetblue;
text-decoration: none;
color: black;
}
li a {
padding: 14px 16px;
}
a:hover {
background-color: rgb(35, 185, 165);
}
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
.rotatingText {
font-family: "Georgia", serif;
font-style: italic;
font-size: 18px;
text-align: center;
animation-iteration-count: infinite;
}
.rotatingText-adjective {
font-family: "Open Sans", sans-serif;
font-size: 50px;
font-style: normal;
font-weight: 700;
left: 0;
margin-bottom: 0;
margin-top: 50px;
opacity: 0;
position: absolute;
right: 0;
text-align: center;
text-transform: uppercase;
top: 0;
animation-iteration-count: infinite;
}
.rotatingText-adjective:nth-of-type(1) {
animation-name: rotate;
animation-duration: 1.5s;
animation-delay: 0.5s;
animation-iteration-count: infinite;
}
.rotatingText-adjective:nth-of-type(2) {
animation-name: rotate;
animation-duration: 1.5s;
animation-delay: 1.75s;
animation-iteration-count: infinite;
}
.rotatingText-adjective:nth-of-type(3) {
animation-name: rotate-last;
animation-duration: 1.5s;
animation-delay: 3s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
@keyframes rotate {
0% {
opacity: 0;
transform: translate3d(0, 50px, 0);
animation-iteration-count: infinite;
}
20%,
80% {
opacity: 1;
transform: translate3d(0, 0, 0);
animation-iteration-count: infinite;
}
100% {
opacity: 0;
transform: translate3d(0, -25px, 0);
animation-iteration-count: infinite;
}
}
@keyframes rotate-last {
0% {
opacity: 0;
transform: translate3d(0, 50px, 0);
animation-iteration-count: infinite;
}
50%,
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
animation-iteration-count: infinite;
}
}
<div>
<ul>
<li><a style='background-color: #1aad0667;' href='index.html'>Home</a></li>
<li><a href='about.html'>About</a></li>
<li><a href='pricing.html'>Pricing</a></li>
<li><a href='contact.html'>Contact</a></li>
</ul>
</div>
<h1 style='text-align: center; font-size: 50px;'> Lorem Ispum </h1>
<p class="rotatingText">
The best
<span class="rotatingText-adjective"> Cloud Gaming </span>
<span class="rotatingText-adjective"> Cloud Computing </span>
<span class="rotatingText-adjective"> Server Hosting </span>
</p>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
Pleas provide examples! (:
CodePudding user response:
change your keyframe values. add animation-delay and duration based on element count.
@keyframes rotate {
0% {
opacity: 0;
transform: translate3d(0, 50px, 0);
animation-iteration-count: infinite;
}
7%, 25% {
opacity: 1;
transform: translate3d(0, 0, 0);
animation-iteration-count: infinite;
}
33% {
opacity: 0;
transform: translate3d(0, -25px, 0);
animation-iteration-count: infinite;
}
}
ul {
background-color: cadetblue;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
display: inline;
margin-right: 10px;
float: left;
}
a {
display: block;
padding: 8px;
background-color: cadetblue;
text-decoration: none;
color: black;
}
li a {
padding: 14px 16px;
}
a:hover {
background-color: rgb(35, 185, 165);
}
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
.rotatingText {
font-family: "Georgia", serif;
font-style: italic;
font-size: 18px;
text-align: center;
animation-iteration-count: infinite;
}
.rotatingText-adjective {
font-family: "Open Sans", sans-serif;
font-size: 50px;
font-style: normal;
font-weight: 700;
left: 0;
margin-bottom: 0;
margin-top: 50px;
opacity: 0;
position: absolute;
right: 0;
text-align: center;
text-transform: uppercase;
top: 0;
animation-iteration-count: infinite;
}
.rotatingText-adjective:nth-of-type(1) {
animation-name: rotate;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.rotatingText-adjective:nth-of-type(2) {
animation-name: rotate;
animation-duration:15s;
animation-delay: 5s;
animation-iteration-count: infinite;
}
.rotatingText-adjective:nth-of-type(3) {
animation-name: rotate;
animation-duration:15s;
animation-delay: 10s;
/* animation-fill-mode: forwards; */
animation-iteration-count: infinite;
}
@keyframes rotate {
0% {
opacity: 0;
transform: translate3d(0, 50px, 0);
animation-iteration-count: infinite;
}
7%, 25% {
opacity: 1;
transform: translate3d(0, 0, 0);
animation-iteration-count: infinite;
}
33% {
opacity: 0;
transform: translate3d(0, -25px, 0);
animation-iteration-count: infinite;
}
}
@keyframes rotate-last {
0% {
opacity: 1;
transform: translate3d(0, 50px, 0);
animation-iteration-count: infinite;
}
50%, 100% {
opacity: 0;
transform: translate3d(0, 0, 0);
animation-iteration-count: infinite;
}
}
<div>
<ul>
<li><a style='background-color: #1aad0667;' href='index.html'>Home</a></li>
<li><a href='about.html'>About</a></li>
<li><a href='pricing.html'>Pricing</a></li>
<li><a href='contact.html'>Contact</a></li>
</ul>
</div>
<h1 style='text-align: center; font-size: 50px;'> Lorem Ispum </h1>
<p class="rotatingText">
The best
<span class="rotatingText-adjective"> Cloud Gaming </span>
<span class="rotatingText-adjective"> Cloud Computing </span>
<span class="rotatingText-adjective"> Server Hosting </span>
</p>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>