CSS is not referred to as animation

Every time we hit a key, the dinosaur receives a jump class that should activate an animation. Unfortunately, the animation does not play.

animation not functioning

<!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" />
        <title>Dino game</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="game">
            <div id="dino"></div>
            <div id="cactus"></div>
        </div>

        <script src="index.js"></script>
    </body>
</html>

const dino = document.getElementById("dino");
const cactus = document.getElementById("cactus");


document.addEventListener("keydown", function (event) {
    jump();
});

function jump() {
    if (dino.classList != "jump") {
        dino.classList.add("jump");
    }

    setTimeout(function () {
        dino.classList.remove("jump");
    }, 300)
}
.game {
    width: 600px;
    height: 200px;
    border-bottom: 1px solid #000000;
    margin: auto;
    overflow: hidden;
}

#dino {
    width: 50px;
    height: 50px;
    background-image: url(/image/dino/run1.png);
    background-size: 50px 50px;
    position: relative;
    top: 150px;
    animation: run 0.3s infinite linear;
}

@keyframes run {
    0% {
        background-image: url(/image/dino/run1.png);
    }

    50% {
        background-image: url(/image/dino/run2.png);
    }

    100% {
        background-image: url(/image/dino/run3.png);
    }
}

#cactus {
    width: 20px;
    height: 40px;
    background-image: url(/image/cactus/cactus.png);
    background-size: 20px 40px;
    position: relative;
    top: 110px;
    left: 580px;
    animation: cactusMov 1s infinite linear;
}

@keyframes cactusMov {
    0% {
        left: 580px;
    }
    100% {
        left: -20px;
    }
}

.jump {
    animation: jump 0.3s linear;
}

@keyframes jump {
    0% {
        top: 150px;
    }
    30% {
        top: 130px;
    }
    50% {
        top: 180px;
    }
    80% {
        top: 130px;
    }
    100% {
        top: 150px;
    }
}

I have verified that the function and condition are being triggered, the class is added to the dinosaur, yet the animation remains unresponsive. My objective is to initiate the jump animation upon pressing any keyboard key.

Answer №1

To implement the desired effect in your CSS, try this:

    #dino.jump {
      animation: jump 0.3s linear;
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS navigation issue

When using the third example provided on this page: http://simple-navigation-demo.andischacke.com/ I encountered an issue where the main page would display an empty div on the left instead of the content filling the entire area. However, when navigating ...

Is it beneficial to rotate an image before presenting it?

I am looking for a way to display a landscape image in portrait orientation within a 2-panel view without altering the original file. The challenge I am facing is that the image size is set before rotation, causing spacing issues with DOM elements. Is ther ...

Issues with HTML structure across various devices

Being a novice in web development, I've been experimenting with creating a modal body. The code snippet below represents my attempt at structuring the modal body: <div className="row modalRowMargin textStyle" > ... Your e ...

Enhancing the appearance of the CSS panel with Font Awesome icons

I need help adding a fontawesome or any other icon to my CSS3 based sliding panel button. The icon should change from open to close when clicked on. Any ideas on how to achieve this would be greatly appreciated! * { margin:0; padding:0; font-famil ...

Is there a way to store a class property as a variable using PostCSS?

Looking to store a dynamic property in a variable for use with calc(). There is a class with a height that changes dynamically. .cuerpo-detalle { height: x; } The goal is to create a variable that captures the height property of the .cuerpodetalle cla ...

What could be causing the HTML <DATALIST> dropdown to display next to its input rather than below it?

I have an input linked to a datalist, and it's functioning correctly. However, when I initially open the dropdown, the option list appears next to (right of) the input. After entering a few characters to narrow down the list, it then shifts below the ...

Guide on how to position a single anchor at the center of a div alongside other elements

I am having trouble centering an anchor on my webpage. I have tried using text-align: center;, but it always puts the link on a new line due to the required div element. Other methods like margins and spans have not worked for me either. span.right { ...

Using the viewport meta tag in HTML and CSS within Laravel's Blade template while also

Greetings everyone! I have a question regarding Blade Laravel: Can we add a condition to the meta name="viewport" content="width=device-width, initial-scale=0.4"? I want the scale to start at 0.4 for smartphones and at 0.6 for tablets. ...

Effortlessly glide to the form and center your attention on the textarea

Upon clicking the link, I aim to accomplish three tasks: Implement smooth scrolling down to #form Automatically focus on the textarea for immediate message writing Add extra top margin to account for a fixed top bar on the website. <a class="link" ...

Ensure that site content remains visible above the table when refreshing the Ajax Table

Whenever I update the table, the content above it ends up below the table. This is frustrating because the content should not be affected by the refresh. How can I resolve this issue? <!DOCTYPE html> <html> <head> <titl ...

Tips for changing the color of shapes when hovering over an image state

I have arranged three images in a column and applied column-count: 3; along with setting border-width for those images. Now I am curious about how to create the hover state for these images. Here is the HTML code snippet: <div class="wrap"> < ...

"Utilizing Bootstrap to create a visually appealing image and text combination in the

I need to arrange the image, first span, and second span in a vertical stack for xs devices. The alignment should be centered for xs devices. If you want to see my code: CLICK HERE <div class="row"> <div> <div class="col-md-9 c ...

Struggles with Aligning CSS Layout

I'm encountering some challenges with the layout of my webpage, particularly with alignment. Here are the issues I'm facing: The login section doesn't fit well in the header and lacks proper alignment. I aim to replicate the design from ...

Tips for positioning social media icons on the right side of the navigation bar

I need assistance aligning my social media icons with the navbar on the right side of the display. Can someone provide guidance? The first image shows the current layout, while the second image illustrates how I would like it to appear: http://imgur.com/a ...

Ways to customize hover color of Bootstrap 5 Dropdown menu

I'm having trouble modifying the hover color for a dropdown menu using Bootstrap 5. I'm unsure of the correct method to achieve this. The desired outcome is as follows: However, at the moment it appears like this: Apologies for the oversight, h ...

Can Bootstrap be configured to use a single resolution exclusively?

Uncertain about the feasibility, I am initiating this inquiry. Can Bootstrap be utilized solely with one resolution (Medium desktop)? This question arises from the fact that the design I possess is catered towards Medium desktop (970px wide). My intentio ...

Utilize AJAX or another advanced technology to refine a pre-existing list

I am trying to implement a searchable list of buttons on my website, but I haven't been able to find a solution that fits exactly what I have in mind. Currently, I have a list of buttons coded as inputs and I want to add a search field that will filte ...

Changing the CSS of ng-view when triggering CSS in ng-include: A step-by-step guide

Incorporating my left-hand, vertical navbar into the page using ng-include, I've managed to make it expand right on hover. Each page is enclosed within a <div class="wrapper">. My goal is to adjust the margin of each wrapper as the navbar expan ...

Personalized Carousel using Ng-Bootstrap, showcasing image and description data fields

I have been working on customizing an Angular Bootstrap Carousel and have managed to successfully change the layout. I now have two columns - with the image on the right and text along with custom arrows on the left. My goal is twofold: First, I am lookin ...

Tips for organizing CSS styles into common and unique statements

Is there a way to apply the same background style but different font styles to two elements without duplicating the style statement in the header part? ...