CSS animations are functional on Safari and Firefox, however, they may not work properly on Chrome

The code snippet below triggers the animation specifically designed for Firefox

#rocket {
    position: relative;
    top: 10px;
    -webkit-animation-name: rocketLaunch;
    animation-name: rocket-launch;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -moz-animation-name: rocketLaunch;
    -ms-animation-name: rocketLaunch;
    -moz-animation-duration: 5s;
    -ms-animation-duration: 5s;
}

This next part executes the animation on the Safari web browser, however it doesn't display properly on Chrome, resulting in a static image as shown in the previous code block.

@-webkit-keyframes rocketLaunch {
    0% {
        top: 700px;
    }
    100% {
        top: 10px;
    }
}
@keyframes rocketLaunch {
    0% {
        top: 700px;
    }
    100% {
        top: 10px;
    }
}

What could be causing the animation to not work correctly on Google Chrome?

cssgoogle-chrome-extensionsafari-extensionkeyframe

Answer №1

It appears that there was an error in the animation name you provided. Please consider using the following corrected code snippet:

#rocket {
    position: relative;
    top: 10px;
    width: 50px;
    height: 50px;
    background-color: #000;
    -webkit-animation-name: rocketLaunch;
    -moz-animation-name: rocketLaunch;
    -ms-animation-name: rocketLaunch;
    animation-name: rocketLaunch;
    -webkit-animation-duration: 5s;
    -moz-animation-duration: 5s;
    -ms-animation-duration: 5s;
    animation-duration: 5s;

}

Answer №2

Revise the second animation name without prefixes.

Prior

-webkit-animation-name: rocketLaunch;
        animation-name: rocket-launch;

Updated

-webkit-animation-name: rocketLaunch;
        animation-name: rocketLaunch;

Please take note of the difference in the animation names.

Additionally,
If browser version compatibility is not a concern
I recommend removing prefixes altogether.

Suggestion

#rocket {
    position: relative;
    top: 10px;
    animation-name: rocketLaunch;
    animation-duration: 5s;
}

Thank you :)

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

Delete the right border on the items in the bottom row

I have a list of items with three rows. I want to separate the first and second row with borders, so I added a right border to those items but excluded the third row from having borders. .test-row { display: grid; grid-template-rows: 1fr 1fr 1fr; ...

htmlcsscss-selectors

When employing a CSS combination of `position: fixed;` and `display: flex;`, the upper portion of the inner element is excised and out of reach

I'm currently working on a fullscreen modal and facing an issue with centering the content vertically when it is smaller than the screen. Additionally, I need the content to start at the top and allow scrolling when its height exceeds the container&ap ...

htmlcss

What is the best way to create grid designs using less in bootstrap?

When using Bootstrap without a preprocessor, we include classes directly into our opening tags like this: <div id="El" class="col-md-1"></div> Personally, I usually work with Bourbon Neat and Sass. With Sass, I can import mixins in the rules ...

csstwitter-bootstrapless

Is it possible for jQuery to execute in a sequential manner?

Below is the code I am working with: https://jsfiddle.net/c4zquo60/1/ CSS: #bg { background-repeat: no-repeat; position: absolute; top:0; bottom:0; left:0; right:0; width:100wh; height:100vh; z-index: -1; opacity: ...

javascriptjqueryhtmlcss

Firefox showing inconsistent jQuery positioning results

Here is a fiddle I created to demonstrate the issue at hand... https://jsfiddle.net/scottieslg/q78afsu8/10/ Running this fiddle in Chrome or Opera yields a value of 8. However, Firefox returns 9, and IE gives 8.5. How can I ensure consistency across al ...

jquerycssfirefox

Including 'active' in an HTML button does not trigger the styles specified in the :active pseudo-class

When a button is clicked, I want its color to change. Below are the HTML elements in question: <div class='chatbot-container'> <div class='chatbot-wrapper' id='chatbot-wrapper' style="display:none;" & ...

javascripthtmlcss

Video embedded in a plain CSS popup that automatically starts playing even before the popup is triggered

My goal is to incorporate a video into a minimalist CSS modal window, following the guidance provided here. While the setup works well overall, I encounter a issue where the video starts playing before the modal window is opened (I need to maintain the "au ...

htmlcssmodal-dialog

Issue with Fluid Square Divs and Box-Sizing

I'm currently working on creating a responsive fluid div that maintains its square shape as the page is resized. I've come across a method that involves using the following CSS code: div{ width:25% padding-bottom:25%; } However, it seem ...

htmlcss

Triggering a targeted action upon the user's click on any HTML element

Currently, I am in the process of developing navigation buttons that trigger a dropdown sub-menu when clicked by utilizing checkbox inputs. Upon clicking the label, the input is checked, causing the menu to drop down, and when the label is clicked again, t ...

htmlcss

On three out of five pages, Mozilla Firefox and Internet Explorer are causing extra spacing in my navigation section, yet not on every page

I've been troubleshooting my website and can't seem to pinpoint the issue. I have 5 pages all connected to the same CSS file and created in a consistent manner. Interestingly, Safari, Chrome, and Opera display everything correctly. However, in Fi ...

csspadding

Using DataTables with jQuery, the CSS background color setting does not function properly

I've attempted various solutions, however, it still doesn't seem to be working. I am attempting to present data from a database in a table using the jQuery DataTables plugin. Everything appears to be correct technically, but the background color ...

jquerycssdatatables

Scaling the ion-spinner to fit your specific needs

In my Ionic application, I am utilizing the ion-spinner. However, I have encountered an issue with resizing the spinner. While custom CSS works well with default spinners, it does not function properly with Bubbles, Circles, and Dots spinners. CSS .spin ...

cssangularionic-framework

What is the best way to change the background color for my photo gallery?

I'm currently working on a project to create a unique photo gallery where each image has a different colored background. I have six images in total, but right now all of them have a pink background. I've attempted adding another .popup class in t ...

javascripthtmlcss

What is the best way to ensure that my pictures are only visible within a modal box?

I've set up a modal box called sectors with two subcategories: publication and food. Each subcategory is linked to a div that contains an image. My goal is to hide the image inside the modal box and display it on the screen once the box is closed. ...

javascriptjqueryhtmlcss

Turn off the CSS hover effect for a custom button if the ng disabled attribute is set to true

My goal is to disable custom buttons, and the disable(pointer) function is working correctly. The issue arises when we try to hover on the button, as the hover effect still works. I therefore need to disable hover as well. I am looking to apply ng-disabl ...

jqueryhtmlcssangularjs

Establish the dimensions of the element to match the dimensions of a responsive image

Currently, I am working on implementing flippable images on my website. It is important to me that the "back" of these images matches the dimensions of the front image. The challenge I am facing is that I have applied the Bootstrap img-responsive class to ...

jqueryhtmlcssangularjstwitter-bootstrap-3

JavaFX GridPane: Automatically adjust size when content is hidden or disabled

Is it feasible to reduce the size of a GridPane row if the content in that row is both disabled and invisible? Even when a Node is set to disable=true and visible=false, the cell continues to occupy space. If I have 8 rows but only the first and last are ...

cssjavafxjavafx-8

Why does Drupal's Advagg display several css and js files?

After installing the Advag module, I noticed that it is combining files, but there seems to be an issue: <link type="text/css" rel="stylesheet" href="/sites/default/files/advagg_css/css__sqX0oV0PzZnon4-v--YUWKBX0MY_EglamExp-1FI654__IOPiOtulrIZqqAM0BdQC ...

javascriptcssdrupal-7

What is the best way to make just the background image transparent using HTML and CSS?

Hey there! I'm trying to make just the background image transparent, while leaving everything else non-transparent. Is this possible with Bootstrap? Here's a snippet of my HTML: HTML Section: <!-- Homepage Section --> <section id= ...

htmlcsstwitter-bootstrapbackgroundopacity

Designing a scrollbar for a tr element using HTML and CSS

I am struggling to create a scrollbar for the inner table that is not being displayed within its container. The container has a yellow background while the table itself is blue. My goal is to have a scroll bar specifically within the table. For more info ...

htmlcss