Troubleshooting: CSS Animation Not Showing up on Screen

Question

Troubleshooting: CSS Animation Not Showing up on Screen

When I was attempting to create a JavaScript game in HTML, I encountered a problem. Despite ensuring that the syntax was correct and conducting some research online, the animation refused to display. No matter how many times I tried, it just would not work.

If you are willing to take a look, here is the HTML code:

#game {
  width: 500px;
  height: 200px;
  border: 1px solid;
  border-color: black;
  border-radius: 7px;
}

#player {
  width: 20px;
  height: 50px;
  background-color: red;
  position: relative;
  top: 150px;
}

#brick {
  width: 20px;
  height: 20px;
  background-color: blue;
  position: relative;
  top: 130px;
  left: 480px;
  animation: block 5s is infinite;
}

@keyframes block {
  0% {
    left: 480px;
  }
  100% {
    left: 40px;
  }
}

<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
  <title>
    javascript game!
  </title>
</head>

<body>
  <div id="game">
    <div id="player">

    </div>
    <div id="brick">

    </div>
  </div>
</body>

</html>

Any help or advice would be greatly appreciated. Thank you!

css css-animations keyframe

Answer 1

Answer №1

Even though you claim to have confirmed the syntax's correctness, your devtools should display an 'invalid property value' when setting the animation for #brick in the CSS.

This issue may stem from an 'is' included in the code. Perhaps you intended to use 1s instead, or maybe it was not supposed to be there at all?

Below is the snippet without the problematic section:

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <title>
            javascript game!
        </title>
        <style>
        #game {
    width:500px;
    height:200px;
    border: 1px solid ;
    border-color: black;
    border-radius: 7px;
}
#player {
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px;
}
#brick {
    width: 20px;
    height: 20px;
    background-color: blue;
    position: relative;
    top: 130px;
    left: 480px;
    animation: block 5s infinite;
}

@keyframes block {
    0%{left:480px;}
    100%{left:40px;}
  }
  </style>
    </head>
    <body>
        <div id="game">
            <div id="player">
                
            </div>
            <div id="brick">
                
            </div>
        </div>
    </body>
</html>

By the way, using transform translateX instead of resetting the left position in an animation may result in more efficient processor usage.

Answer 2

Even though you claim to have confirmed the syntax's correctness, your devtools should display an 'invalid property value' when setting the animation for #brick in the CSS.

This issue may stem from an 'is' included in the code. Perhaps you intended to use 1s instead, or maybe it was not supposed to be there at all?

Below is the snippet without the problematic section:

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <title>
            javascript game!
        </title>
        <style>
        #game {
    width:500px;
    height:200px;
    border: 1px solid ;
    border-color: black;
    border-radius: 7px;
}
#player {
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px;
}
#brick {
    width: 20px;
    height: 20px;
    background-color: blue;
    position: relative;
    top: 130px;
    left: 480px;
    animation: block 5s infinite;
}

@keyframes block {
    0%{left:480px;}
    100%{left:40px;}
  }
  </style>
    </head>
    <body>
        <div id="game">
            <div id="player">
                
            </div>
            <div id="brick">
                
            </div>
        </div>
    </body>
</html>

By the way, using transform translateX instead of resetting the left position in an animation may result in more efficient processor usage.

Answer 3

Answer №2

adjusting various animation properties can make it work, such as animation-name: block;, animation-duration: 5s;, and

animation-iteration-count: infinite;

#game {
    width:500px;
    height:200px;
    border: 1px solid ;
    border-color: black;
    border-radius: 7px;
}
#player {
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px;
}
#brick {
    width: 20px;
    height: 20px;
    background-color: blue;
    position: relative;
    top: 130px;
    left:0;
    animation-name: block;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes block {
    0%{left:480px;}
    100%{left:40px;}
  }

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <title>
            creating a javascript game!
        </title>
    </head>
    <body>
        <div id="game">
            <div id="player">
                
            </div>
            <div id="brick">
                
            </div>
        </div>
    </body>
</html>

Answer 4

adjusting various animation properties can make it work, such as animation-name: block;, animation-duration: 5s;, and

animation-iteration-count: infinite;

#game {
    width:500px;
    height:200px;
    border: 1px solid ;
    border-color: black;
    border-radius: 7px;
}
#player {
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px;
}
#brick {
    width: 20px;
    height: 20px;
    background-color: blue;
    position: relative;
    top: 130px;
    left:0;
    animation-name: block;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes block {
    0%{left:480px;}
    100%{left:40px;}
  }

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <title>
            creating a javascript game!
        </title>
    </head>
    <body>
        <div id="game">
            <div id="player">
                
            </div>
            <div id="brick">
                
            </div>
        </div>
    </body>
</html>

Answer 5

Answer №3

#game {
    width:500px;
    height:200px;
    border: 1px solid ;
    border-color: black;
    border-radius: 7px;
}
#player {
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px;
}
#brick {
    width: 20px;
    height: 20px;
    background-color: blue;
    position: relative;
    top: 130px;
    left: 480px;
 animation: block 5s infinite;
}

@keyframes block {
    0%{left:480px;}
    100%{left:40px;}
  }

There was a minor issue in your code with the usage of "is" in the animation property.

Answer 6

#game {
    width:500px;
    height:200px;
    border: 1px solid ;
    border-color: black;
    border-radius: 7px;
}
#player {
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px;
}
#brick {
    width: 20px;
    height: 20px;
    background-color: blue;
    position: relative;
    top: 130px;
    left: 480px;
 animation: block 5s infinite;
}

@keyframes block {
    0%{left:480px;}
    100%{left:40px;}
  }

There was a minor issue in your code with the usage of "is" in the animation property.

Troubleshooting: CSS Animation Not Showing up on Screen

Answer №1

Answer №2

Answer №3

Similar questions

Tips on inline password field placement for a better user interface experience?

Stylish Navigation Menu Logo/Site Name

issues with alignment between bootstrap div and canvas

Creating a personalized stepper component (using custom icons) using HTML

Implementing image max-width and maintaining aspect ratios for responsiveness

Mobile version experiencing issue with Navbar not collapsing

Encountering a problem creating a hover overlay effect on a transparent PNG image within a parent div that has a background color

Ways to efficiently convert HTML form data into JSON format

Creating a dynamic image carousel using jQuery

Position a dynamic <div> in the center of the screen

Challenge with the contrast of text color on dark mode with a backdrop of light color texture (image)

How can I navigate to a specific section within a Bootstrap modal without being redirected back to the origin of the modal?

Scrollbars in Jquery are not visible anymore when adjusting the size of a div element, causing them to expand

A fixed header list using CSS with a single scroll bar

Issues with image sizing on mobile devices

Using Jquery to set values for css properties

Ensure that every line of code within the button element contains all the required attributes

Struggling to align the push menu properly within the Bootstrap framework

How to style material-ui input with outlined variant using css

Element failing to adhere to CSS grid layout