How to Have Css3 Animation to Loop Forever

How can I make my animate.css animation loop forever?

you'd need to use iterationCount as the prop.

<Flash duration=".8s" delay="1s" iterationCount="infinite" >
 <Button primary>LOG IN <AiFillLock /></Button>
</Flash>

And ensure you have styled-component installed.

How to loop through a CSS Animation?

If you want to make the Transition smooth, then obviously you should make the ending equal to the beginning.

Then, there is no difference between the beginning and ending.

I made my own version of your CSS code to show you how I would have done it. You should modify it to make your own version.

@keyframes color-function
{
    0%
    {
        background-color: red;
        height:100px;
        border-radius: 50%;
    }
    20%
    {
        background-color: yellow;
        height:100px;
        border-radius: 50%;
    }
    40%
    {
        background-color: blue;
        height:100px;
        border-radius: 50%;
    }
    60%
    {
        background-color: green;
        height:100px;
        border-radius: 50%;
    }
    80%
    {
        background-color: red;
        height:150px;
        border-radius: 0%;
    }
    100%
    {
        background-color: red;
        height:100px;
        border-radius: 50%;
    }
}

How to loop a CSS3 fill up animation?

css animations with an infinite loop as others have said, but you need 3 cards to get each color to top the next instead of the up and down motion.

.preloader {  background: #ff0000;  height: 100px;  width: 100px;  background: linear-gradient(      to top,       red,      red 33.3333%,      blue 33.3333%,      blue 66.66667%,      red 66.66667%,      red 100%    );  background-size: 100% 300%;  background-position:top;}
.preloader:hover {    -webkit-animation: loaderLoop 2s linear infinite;    -moz-animation: loaderLoop 2s linear infinite;    animation: loaderLoop 2s linear infinite;}
@-webkit-keyframes loaderLoop{    0%{background-position:top;}    100%{background-position:bottom;}}
@-moz-keyframes loaderLoop{    0%{background-position:top;}    100%{background-position:bottom;}}
@keyframes loaderLoop{    0%{background-position:top;}    100%{background-position:bottom;}}

<div class="preloader"></div>

.rotate{
 animation: loading 3s linear infinite;
 @keyframes loading {
  0% { 
    transform: rotate(0); 
  }
  100% { 
    transform: rotate(360deg);
  }
 }
}