The CSS3 Animation remains stationary

I've been attempting to animate my block element moving to the left using CSS animation shorthand property, but unfortunately, it's not working as expected. Here is my HTML:

 <div id="game">
     <div id="block"></div>
     <div id="hole"></div>
     <div id="character"></div>
 </div>

And here is my CSS:

#game{
    width: 400px;
    height: 500px;
    border: 1px solid black;
    margin: auto; 

}

#block{
    width: 50px;
    height: 500px;
    background-color: black;
    position: relative;
    left: 400px;
    animation: mblock 1s infinite linear;
    -webkit-animation: mblock 1s infinite linear;
    -moz-animation: mblock 1s infinite linear;
}

@-webkit-keyframes mblock {
  0%{ left:400px };
  100%{ left:-50px };  
}

@-moz-keyframes mblock {
  0%{ left:400px };
  100%{ left:-50px };  
}


@keyframes mblock {
  0%{ left:400px };
  100%{ left:-50px };  
}

#hole{
    width: 50px;
    height: 150px;
    background-color: red;
    position: relative;
    left: 400px;
    top: -500px;
    animation: mblock 2s infinite linear;
    -webkit-animation: mblock 2s infinite linear;
    -moz-animation: mblock 2s infinite linear;
    
}

If you'd like to see the issue in action, you can check out this JSFIDDLE link: https://jsfiddle.net/nwmLpdba/

Can anyone provide some insight into what might be causing this problem?

Answer ā„–1

Eliminating the semi-colon would be beneficial in this case.

@keyframes mblock {
  0%{ left:400px; } /* it is unnecessary to include a semicolon at the conclusion of the block*/
  100%{ left:-50px; } /* there is no requirement for a semicolon at the end of the block */
}

Answer ā„–2

@-webkit-keyframes mblock {

  100%{ left:-50px };  
}

@-moz-keyframes mblock {

  100%{ left:-50px };  
}


@keyframes mblock {

  100%{ left:-50px };  
}

Kindly exclude the 0%. It is already included in the default class.

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

Forming a space between borders

I'm attempting to create a space within a div's border that can accommodate an image, much like so: Is there a method to achieve this using only CSS? The only solution I have found is: .box { background: url(img.png) bottom left; border ...

What is the best way to set the active class on the initial tab that is determined dynamically rather than a static tab in Angular?

I'm currently facing a problem with ui-bootstrap's tabsets. I have one tab that is static (Other) and the rest are dynamically added using ng-repeat. The issue I'm having is that I can't seem to make the first dynamically loaded tab act ...

Tips for verifying if the input in a Material UI textfield is an <iframe> tag

In my ReactJS code, I am utilizing the TextField component from material-ui. I need to verify if the user input is an iframe. How can I achieve this? Currently, I am attempting to use window.parent.frames.length > 0; to determine if the page contains a ...

The height of the textarea is too excessive

Just a quick question - in my HTML, I have a simple textarea nested within the body tags. Within my JavaScript, I am using jQuery to ensure that the body element is dynamically resized to match the height of the window: $(function() { $("body").heigh ...

Tips for showcasing a lineup horizontally with HTML and CSS

I'm currently working on creating a menu using HTML. I've included my links in an unordered list (ul) as shown below. In my CSS, I added a display:inline; property to the links to make them appear side by side like a menu. However, for some reaso ...

Table designed using the Flexbox layout model

I am looking to create a table with multiple columns that can handle dynamic data. The challenge is that using the base <table> element would cause the column width to change when the content changes and I also need the ability to hide columns using ...

The issue with NGX-Bootstrap/Angular Pagination arises when attempting to adjust the maxSize input while the screen view (width) is being altered

Currently, I am utilizing the Pagination component from Valor Software (click here to access). I am interested in adjusting the maxSize input dynamically based on changes in screen width. For reference, please see this example: Click to view example. It ...

When using jQuery and AJAX, the functions each, if, post, and .html work properly but occasionally erase data inexplicably

I have a PHP page containing FedEx and UPS tracking numbers stored in a MySQL database, which are displayed within DIVs with the class "trackingnumber". Using JavaScript, I loop through these divs to retrieve the ID and then send it to a PHP page that fetc ...

Establishing the REM value for all CSS properties

My goal is to implement the use of rem units throughout my website. However, relying on the standard rem-to-px conversion rate doesn't feel very intuitive: 10px = 0.625rem 12px = 0.75rem 14px = 0.875rem 16px = 1rem (base) 18px = 1.125rem 20px = 1.25r ...

Load data into a table in HTML after a successful jQuery event

I'm facing an issue with populating an HTML table dynamically. Below is the structure of my HTML table: <table class="flexme" id="table" border="1"> <thead> <tr> <th width="100">Usuario</th> <th wid ...

Replacing text in the main navigation bar with sIFR

Could this menu layout be improved? <div class="navigation"> <ul id="nav-menu"> <li class="active"> <div class="sifr-r active"><a href="#" title="home" class="top-link"><span class="blue-small">01.</span& ...

The HTML output is essential for creating the content of a Bootstrap carousel

Is there a way to populate my bootstrap carousel with the content of an HTML page instead of images? I attempted to create a div and use CSS to load the contents from ac1_div using content:url(carousel_content.html), but it was unsuccessful. <!-- our ...

phperror message is included and echoed

I am facing an issue while trying to utilize the php include tag for my header and footer sections. Even though my index file and header.php file seem to be error-free, the included file is not showing up when I preview it in a browser. Is there an easy fi ...

Issue with arranging cards in a grid when utilizing v-for alongside bootstrap

Just starting out with vuejs and attempting to create a grid by looping through objects using bootstrap classes. However, I'm running into an issue where the cards are not forming a grid as expected when utilizing the col classes. Below is the code f ...

What causes the parent element's click event to trigger on its own when a child textbox is clicked or focused in Safari?

Describing my HTML setup [Checkbox] [Text] [Input element (Display if check-box is marked)] <span class='spGrpContainer'> <label id='stepGH_Group1' class='lblStep GHSteps lblGroupheader' stepid='1' st ...

Tips for adding an additional div inside a navigation container, evenly spacing objects, and aligning the search bar to the right

I'm currently working on designing a simple navigation bar but I'm facing difficulties in aligning the elements correctly. See my progress here: https://jsfiddle.net/zigzag/bL1jxfax/ Here are my objectives: 1) Ensure that the navigation bar rea ...

Dropping down with Twitter Bootstrap's navbar menu

Iā€™m currently facing some challenges with getting the Twitter Bootstrap drop-down navbar feature to function properly. Despite going through various tutorials, I am unable to make it work by directly copying the code. The console displays the following e ...

Clicking on the mat-icon-button with the matSuffix in the password field will always trigger a

Seeking assistance with implementing mat-icon-button matSuffix in Angular for a login page. This is my first time working with Angular and I am facing an issue with the password field. I have used mat-icon-button matSuffix, but whenever I click on the ico ...

Steps for updating the <option> selection in the third <select> menu when the second <select> menu changes, with the second menu being populated by altering the value of the first dropdown through jQuery AJAX

I'm facing a unique situation in my school management project and have been unable to find a solution online. Here's the issue: I have three <select> elements - the first one is for selecting a class, the second one is for selecting a secti ...

Ways to customize the default CSS styles of angularJS for elements like search box and more

Looking for a way to customize the appearance of an AngularJs search box? <div ng-controller="PersonListCtrl"> <div class="bar">Search: <input ng-model="query"> </div> <ul cl ...