My div remains stationary despite keyframes

I've been attempting to create a div that moves up and down using CSS3, but unfortunately it's not working properly.

<div class="globo"></div>

@-webkit-keyframes mover {
    0%, 100% { top: 0%;}
    50% { top: 5%; }
}
@-moz-keyframes mover {
    0%, 100% { top: 0%;}
    50% { top: 5%; }
}
@-o-keyframes mover {
    0%, 100% { top: 0%;}
    50% { top: 5%; }
}
@keyframes mover {
    0%, 100% { top: 0%;}
    50% { top: 5%; }
}
.globo{
    float: left;
    height: 300px;
    width: 270px;
    background: url('https://lh3.ggpht.com/-hCYXxhc-U4BqD1CBVCARXlp1bPT7ci7pP1Q4NEOzIKpS8zKPfyCCQF5xjEVUf4vGrJ2=w300');
    -webkit-animation: mover 5s infinite; /* Safari 4+ */
     -moz-animation:    mover 5s infinite; /* Fx 5+ */
     -o-animation:      mover 5s infinite; /* Opera 12+ */
    animation:         mover 5s infinite;
}

If you'd like to take a look at my code, you can find it here: http://jsfiddle.net/LGMv7/1/

Answer №1

Include this code snippet in your .globo

position: absolute;


.globo{
    float:left;
    position: absolute;
    height: 300px;
    width: 270px;
    background: url('https://lh3.ggpht.com/-hCYXxhc-U4BqD1CBVCARXlp1bPT7ci7pP1Q4NEOzIKpS8zKPfyCCQF5xjEVUf4vGrJ2=w300');
    -webkit-animation: mover 5s infinite; /* Safari 4+ */
     -moz-animation:    mover 5s infinite; /* Fx 5+ */
     -o-animation:      mover 5s infinite; /* Opera 12+ */
    animation:         mover 5s infinite;
}

Check out the demonstration here

Answer №2

Make sure to set the position of your div as absolute for it to work correctly!

Alternatively, you can use the transform property instead of setting the position to absolute for your div.globo element.

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

Having Trouble Operating Virtual Tour in Flash

I recently used a third-party software to create a virtual tour for my client's website. The virtual tour works perfectly fine on its own, as you can see here: However, when I tried to include the virtual_tour.html page on the index page of the websi ...

developing a fresh node within the jstree framework

Recently, I have been working on creating a node using crrm as shown below $("#TreeDiv").jstree("create", $("#somenode"), "inside", { "data":"new_node" }); This specific function is triggered by a wizard, enabling me to seamlessly create a new node withi ...

Strategies for preventing the appearance of empty rows associated with unused <tr> elements

I currently have multiple asp.net panel controls that I am displaying using an html table. These panels are initially set to visible = false, but depending on the data retrieved from the database, some of the panels will be made visible. The issue arises w ...

Retrieving data from a database in PHP and assigning it as the value for an HTML select tag

Seeking assistance on a project to develop a stock management system for an herb factory using PHP with a MySQL database. Currently working on a page that allows the user to edit the value of a bench containing herbs. The bench details have been stored in ...

What is the best way to utilize components depending on the screen size of the device?

Is there a way to show varying HTML elements or components depending on the device size? In React, you can utilize a package called react-responsive. However, in Next.js, when using this package in a component, server-side rendering does not occur on tha ...

What could be causing the span class data to not be retrieved by the getText method

Looking to retrieve the value of a span class called 'spacer-right big project-card-measure-secondary-info' <span class="spacer-right big project-card-measure-secondary-info">1</span> snippet of code: browser.waitForEl ...

Difficulty in adjusting the height of the popover menu that appears when using the Select Validator in Material UI

I am having trouble adjusting the height of a popover that emerges from a select validator form in Material UI. Despite attempting various methods, including adding the following CSS to the main class: '& .MuiPopover-paper': { height: &apos ...

Automatically adjust the top margin of the content section to accommodate a fixed header height

After extensive searching, I've come across various solutions but none of them seem to fit my needs. I am a beginner/amateur developer. The issue I am facing is with a fixed header that resizes when scrolling. I understand that by adding padding-top: ...

What is the best way to create a triangle shape that is responsive to elements?

I'm trying to make a background shape with a triangle inclusion using CSS. I want it to be responsive to all screen sizes, but I'm having some trouble. Any tips on how to achieve this? header { width: 100%; height:150px; background: #eee; } m ...

What values can be used for the CSS Property "padding-right-ltr-source"?

Currently, I am facing an issue with box padding specifically in Firefox. Upon inspecting the affected span element, I noticed a property called "padding-right-ltr-source" with the value "physical". Here is the snippet of code: >padding: 0px 15px; ...

What is the process for linking my website hosted on an external server to the database running on XAMPP on my local machine?

Currently, I have been working on a project website using XAMPP. The site includes a database where users can register and store their information. Initially, my plan was to test the website with friends by physically giving them my laptop. Unfortunately, ...

Investigating nearby table cells

I am in the process of creating a game called Dots and Boxes. The grid is filled with numerous dots: <table> <tr> <td class="vLine" onclick="addLine(this)"></td> <td class="box" ...

Flexibility on smaller screens using Flexbox

On larger screens, I have arranged 4 icons in a row, but on smaller screens (less than 768px), I need to display only 2 icons in a row. This is my current code : .welcome { display: flex; justify-content: space-around; } @media (max-width: 768px) ...

Suggestions for creating a simple implementation of a 3 x 3 cell layout with a large center using flexbox are

Creating a grid layout like this 3 x 3 cell with large center using CSS Grid is quite straightforward. .container { display: grid; grid-template-columns: 60px 1fr 60px; grid-template-rows: 60px 1fr 60px; } But what if we wanted to achieve the same ...

What steps can I take to address a 500 internal server error when attempting to execute a Python script within a CGI file?

Looking to execute a python script on a Strato-hosted website (.nl) using a CGI file. The setup includes my code: a cgi file, python file, and dependencies file for adding something to the PATH. Check out the files here. Here's what the folders look ...

Incorporating video responses into an HTML player using Node.js with the req.pipe(res) method

I have successfully implemented ytdl-core to play a video and it is working as expected. Below is the code snippet: app.get('/',function(req,res) { var fs = require('fs'); var ytdl = require('ytdl-core'); ...

When bullet points are aligned in the middle of wrapped text instead of the top line

When using bullet points on my Joomla site for a long sentence that wraps to multiple lines, I noticed that the bullets align with the middle of the wrapped text rather than staying flush with the top line. For example, if the text wraps to 3 lines, the bu ...

Navigate through the components of an array within HTML

I am a beginner in HTML and I need to customize a specific piece of code to suit my requirements. Here is the code snippet written in pseudo code: <app-myapp *ngIf="true" [exclude] = "[this.myUser.id]" ...

Tips for adjusting the header color in materialize framework?

I've been working on a web template and I'm looking to customize the color displayed in the Android browser (maybe using JS?). The default color is blue. How can I go about changing it? https://i.sstatic.net/RxLbS.jpg Appreciate any help! ...

When using HTML/Bootstrap5, the ms-auto class does not correctly align items to the right in the navbar

I'm currently working on mastering bootstrap through an online tutorial, but I've hit a roadblock when it comes to right-aligning items in a navbar. I've double-checked my code against the instructor's, and it's a perfect match: &l ...