2

I'm learning how to do animations in CSS. I know I can set the iteration-count property to infinite and it will run indefinitely, but I want the loop to be smooth. After coming back to 0% in the keyframe the animation is not smooth and changes to that property instantly. I want the transition from 100% to 0% to be smooth if that makes sense.

This is my HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS Animations</title>
</head>
<body>
    <div id="shape"></div>
</body>
</html>

This is my CSS

*
{
    margin:0px;
    padding:0px;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;
}
#shape
{
    background-color: red;
    width:100px;
    height:100px;
    border-radius:50%;
    border:0px;
    animation-name:color-function;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
@keyframes color-function
{
    0%
    {
        background-color: red;
        height:100px;
        border-radius: 50%;
    }
    25%
    {
        background-color: yellow;
        height:100px;
        border-radius: 50%;
    }
    50%
    {
        background-color: blue;
        height:100px;
        border-radius: 50%;
    }
    75%
    {
        background-color: green;
        height:100px;
        border-radius: 50%;
    }
    100%
    {
        background-color: red;
        height:150px;
        border-radius: 0%;
    }
}

Thank you

Abhishek Satyavolu
  • 77
  • 1
  • 11

2 Answers2

2

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%;
    }
}
Crusty
  • 66
  • 5
  • Thanks. This solved my problem. But is there any other way to make the transition smooth without adding extra code to the css? – Abhishek Satyavolu Mar 08 '21 at 06:14
  • Of course there is. Are you willing to use Java Script to pull the rug out from under the CSS, and leaving him standing there with his mouth hanging open ? – Crusty Mar 08 '21 at 06:29
  • Well, I don't know JavaScript but I am interested in learning that at some point. I will take your advice into consideration and try to do this animation with JavaScript. Thank you. – Abhishek Satyavolu Mar 08 '21 at 08:34
1

I'll tell you what. I will save you the trouble of learning the JavaScript, and will just give you the code that will fix your problem.

First, you will have to change your original HTML code to call-up the JavaScript file :

<body>

    <div id="shape"></div>

<script src="./myScripts.js" type="text/javascript"></script>

</body>

Next, you will have to take a regular old ordinary text file ( let's call it AAA.txt ) and place that text file right next to your style.css file.

Inside the text file, paste the following text :

document.head.insertAdjacentHTML("beforeend", " <style> " + 
  " #shape { background-color: red; width:100px; height:100px; border-radius:50%; } " + 
  " #shape { border:0px; animation-name:color-function; animation-duration: 5s; } " +
  " #shape { animation-timing-function: linear; animation-iteration-count: infinite; } " +
  " #shape { animation-fill-mode: forwards; } " +
  " @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%; } } " +
  " </style>" ) ;

As you can see, that really wasn't a text file that you created, it was a JavaScript file. So re-name the file from AAA.txt to myScripts.js

Everything else will remain unchanged. You will use your original style.css file with no changes at all. You can run your ( modified ) html file just like you are used to doing, and everything should work like you want it to.

And by the way, after reading the JavaScript code, can you see why the CSS is standing there with his mouth hanging open ?

Crusty
  • 66
  • 5