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

How to Customize the Menu Style in Your WordPress Theme

Creating virtual hover effects on Android browsers for touch events

What is the process for defining an outcome when a draggable element is placed into a droppable area using Jquery?

Tips for maintaining the chat scroll position while typing on mobile devices

Struggling to align nested grids in the center

What is causing the issue of my oversized images not showing up on GoDaddy?

Resetting the width of a CSS-styled div to its default maximum width

``There seems to be a problem with the radio buttons where the selection disappears when

Data extracted from the range selector

The issue of the responsive navigation bar overlapping the header and navigation links not functioning properly

Font on the internet that does not have the specific Germanic di

Highlighting table column when input is selected

Positioning MDL cards in HTML documents

Tips for animating the box-shadow effect using jQuery

Counting the number of visible 'li' elements on a search list: A guide

Calculating the total length of an SVG element using React

What is causing the malfunction of the position within this particular section?

The Material UI dialog box popped up against an unexpected gray backdrop

Adjusting the Aspect Ratio of an Embedded YouTube Video

How can I align text to the center and set the text color at the same