Css3 Animation - Smooth Infinite Cycle

CSS3 animation - smooth infinite cycle

You just have to fix your frames in another way : make the from (0%) and to (100%) values the same:

html, body {       width: 100%; height: 100%;    margin: 0;    padding: 0;}body {    -webkit-animation: pulsate 20s linear infinite;    -moz-animation: pulsate 20s linear infinite;    animation: pulsate 20s linear infinite;}
@-webkit-keyframes pulsate {    0% {background: black}    20% {background: red}    40% {background: blue}    60% {background: orange}    80% {background: green}    100% {background: black}}@-moz-keyframes pulsate {    0% {background: black}    20% {background: red}    40% {background: blue}    60% {background: orange}    80% {background: green}    100% {background: black}}@keyframes pulsate {    0% {background: black}    20% {background: red}    40% {background: blue}    60% {background: orange}    80% {background: green}    100% {background: black}}

CSS3 Animation - Smooth Infinite Animation

The clasical aproach to this would be just using different delays:

div {  animation-name: all;  animation-duration: 9s;  animation-iteration-count: infinite;  width: 100px;  height: 100px;  background-color: yellow;}
.first {  animation-delay: -3s;  background-color: lightgreen;}.third {  animation-delay: -6s;  background-color: lightblue;}

@keyframes all {  0% {    opacity: 0;  }  33.3% {    opacity: 1;  }  67% {    opacity: 0;  }  100% {    opacity: 0;  }}

<div class="first"></div><div class="second"></div><div class="third"></div>

How to make my infinite linear animation smooth?

It appears that background-size: 200% 200%; and background-position: 100% 0%; aren't playing nicely together. If you set background-position: 200% 0%; it runs smoothly.

By setting the animation to be twice as long we can make sure it still looks like its moving at the same rate.

@keyframes AnimationName {  0% {    background-position: 200% 0%  }  100% {    background-position: 0% 0%  }}
.myanimation {  width: 50px;  height: 150px;  background: repeating-linear-gradient(-45deg, #43ABC9, #43ABC9 7px, #369ebc 7px, #369ebc 14px);  animation: AnimationName 4s linear infinite;  background-size: 200% 200%;}

<div class="myanimation"></div>

Finish infinite iterations cycle and stop the animation with CSS

1. You had a problem with the name of your keyframe name - spinnerAnimation vs preloaderAnimation
2. The only way I was able to set IE to stop the animation was to set animation: none; inside the .stop class:

$("button").click(function() {  $(".spinner").addClass("stop");})

.spinner {  width: 30px; height: 30px;  background: green;  animation: spinnerAnimation 2s linear infinite;}
.spinner.stop {  -webkit-animation-iteration-count: 1;  animation: none;}
button {  margin-top: 20px;}@-webkit-keyframes spinnerAnimation {  0% {    -webkit-transform: rotate(0);  }  100% {    -webkit-transform: rotate(360deg);  }}
@keyframes spinnerAnimation {  0% {    transform: rotate(0);  }  100% {    transform: rotate(360deg);  }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="spinner"></div><button>Stop spinner</button>

How to create a keyframe smooth continuous loop that doesn't jump with a background image?

Live example to continuously move up :

#animate-area {
  background-image: url('https://pt.freelogodesign.org/Content/img/logo-ex-2.png');
  width: 100%;
  height: 500px;

  background-position: 0;
 animation: slideup 5s linear 1s infinite;
 
 position:absolute;
}

@keyframes slideup {
  0% { background-position: 0 0; }
  50% { background-position: 0 -500px; }
  100% { background-position: 0 -900px; }
}

<div id="animate-area"></div>

Smooth animation loop for horizontal text scroll

I have stripped things down to give a basic continuous scroll - with the overall width of the 'sentence' (span) being a minimum 100vw in this snippet.

html,
body {
  margin: 0;
}

.scroll {
  position: relative;
  width: 100vw;
  height: 15%;
  min-height: 150px;
  background-color: #252525;
  overflow: hidden;
  z-index: 1;
  margin: 0;
  padding: 0;
}

.m-scroll {
  overflow_ hidden;
  height: 100%;
  white-space: nowrap;
  animation: scrollText 10s infinite linear;
  margin: 0;
  font-size: 0;
  display: inline-block;
}

span {
  font-size: 50px;
  display: inline-block;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  color: white;
}

@keyframes scrollText {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}

<div class="scroll">
  <div class="m-scroll"><span style="rbackground: cyan;">TEXT INFINITE SCROLL </span><span style="rbackground: magenta;">TEXT INFINITE SCROLL </span><span style="rbackground: yellow;">TEXT INFINITE SCROLL </span><span style="rbackground: gray;">TEXT INFINITE SCROLL </span></div>
</div>

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%;
    }
}

---

Related Topics