The CSS animation is functioning smoothly in Chrome, but unfortunately, it is not working in Firefox

I'm having trouble with my animation not working in Firefox and Safari, even though it works fine in Chrome. I've tried using the -Moz- and -WebKit- vendor prefixes, but it seems that Firefox and Safari already support the animation.

CSS:

.vision-div {
  margin-top: 0rem;
  width: 100%;
  text-align: center;
}

.vision-grid-div {
  width: 100%;
  text-align: center;
  margin-top: 5rem;
}

.visionheading {
  font-size: 2.5rem;
  text-align: center;
}

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.vision-subdiv1-span {
  position: absolute;
  left: 12.5rem;
}

<!-- Remaining CSS code retained for brevity -->

HTML:
<div className="vision-div container">
  <h1 className="visionheading">
    Why you should find a Fitness buddy!
  </h1>

  <!-- HTML markup continues below -->

Answer №1

The reason for this issue is quite straightforward - the use of @property is not compatible with Firefox or Safari browsers, only with Chrome. As a result, your animation will function properly on Chrome but not on Safari or Firefox. For further clarification on which browsers support the @property, you can refer to this caniuse page.

I suggest verifying any new CSS features on caniuse to ensure compatibility with all the browsers you intend to cater to.

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

When running `node compile.js`, no combined CSS file is being created

I have finally mastered the art of setting up and executing the "node compile.js" file in the claro theme folder to compile each *.less file into its corresponding *.css file. However, I noticed that the old claro.css file remains unchanged. Is this the in ...

Looking to showcase website HTML code by simply clicking on a banner image?

I am looking to implement a feature where banner HTML code is displayed in a popup on website when the banner is clicked. For instance, an example of a banner could be: <img src="https://myweb.com/images/banners/1.gif"> Upon clicking the banner im ...

The website code lacks a dynamically generated <div> element

When using jQuery to dynamically add content to a "div" element, the content is visible in the DOM but not in the view page source. For example: <div id="pdf"></div> $("#btn").click(function(){ $("#pdf").html("ffff"); }); How can I ensur ...

Trouble arises in next.js containers when their content exceeds the specified limits due to @media rules adaptation

I've been working tirelessly for the past 2 days to resolve an issue with my next.js project. This is my first time using this technology and I feel like I might be overlooking something crucial. The problem revolves around three layers (as seen in t ...

Adjust the width of a div in Angular 6 based on a specified condition

I need to adjust the width of a div based on certain conditions. <div [ngStyle]="'width': selectedTab =='Home' ? '50%' : '100%'"> </div> The currently selected tab is stored in "selectedTab". There ...

How can I redirect a remote image URL to a local folder during development?

Currently, I am pulling image URLs from a database that was dumped from the production server. An example of one of these URLs is https://example.com/imageStorage/photo.jpg. These URLs are then used to display images in HTML templates using the following f ...

I am encountering challenges with submitting the form

I am encountering an issue where I want to submit the form on button click and navigate to the next page, but instead I get an error message saying: "Form submission canceled because the form is not connected". Does anyone have a solution for this problem ...

Tips for ending a page prematurely

I am currently facing an issue with hosting images on my webpage where the bottom of the images are uneven, creating a messy look at the bottom of the page. Normally I would attempt to align them in a perfect square layout, but since the page needs to be ...

Guide on selecting a radio button based on data retrieved from a MySQL database

How can I populate my radio button in an edit form with data from MySQL by writing the value in the radio button? Below is the code snippet: foreach($arrAnswer as $ans) { <input name = "answer_'.$i.'" type="radio" value="' ...

Open the PDF document in a stylish jQuery popup like fancybox or a similar plugin

Can a PDF file be loaded in a popup? I understand that some browsers may require Adobe Reader to view PDFs, but Chrome has its own built-in PDF viewer. ...

Utilizing Bootstrap 3: Mastering the Implementation of .col Classes with .form-control Classes

In my form, I have utilized the .form-control classes for the form elements. To arrange two inputs side by side, I am applying .col-md-6 on each of these inputs. However, the width generated by .col-md-6 is being overridden by the .form-control class. Is ...

Is there a way to eliminate the white border surrounding this input field? (JSFiddle link included)

http://jsfiddle.net/gn3LL/ .error { background-color: red; } <input id="firstname" class="custom error" name="first_name" type="text" placeholder="" class="input-xlarge"> I am trying to remove the small white border around the inside of the inpu ...

Experiencing problems with the calling convention in JavaScript

Here is a snapshot of the code provided: If the function testFields at Line:3 returns false, then the program correctly moves to Line:21 and returns the value as false. However, if testFields returns true, the program proceeds to Line:4, but instead of ex ...

Images in the navigation bar are bouncing around on the page, even though the CSS and HTML configurations

We are experiencing some erratic behavior with our nav bar images that seems to occur only on page refreshes. The issue appears to be related to the loading of our sprite, which contains all the images for the nav bar links. Despite trying different float ...

Encountering difficulties triggering the click event in a JavaScript file

Here is the example of HTML code: <input type="button" id="abc" name="TechSupport_PartsOrder" value="Open Editor" /> This is the jQuery Code: $('#abc').click(function () { alert('x'); }); But when I move this jQuery code to a ...

Combining the container and container-fluid classes with Bootstrap for versatile layout design

My goal is to have my website display with a fixed width on xs, sm, and md screens, but be fluid on lg screens. After researching the Bootstrap grid system, I discovered that I can use the .container class for fixed width layouts or the .container-fluid ...

Tips for incorporating a download button into a video player using Plyr JS

I'm using Plyr JS and I am trying to add a download option for each video. Here is what I've done so far to make the download option work: Even though I have included: controlsList="nodownload" <video controls crossorigin playsinline contro ...

How to display and download a PDF file on a JSP web page

Can anyone help me with a simple trick to solve this question I have? In my project folder, I have 5 PDF files named file1.pdf, file2.pdf, file3.pdf, file4.pdf, and file5.pdf. I want to display these files in 5 rows on my webpage, each row containing VIEW ...

Uncovering Inline Styles Infused with Javascript for Effective Debugging of Javascript Code

SITUATION: I have recently inherited a website from the previous developer who has scattered important functions across numerous lengthy JS files. I am struggling to track down the source of an inline CSS style within the JS or identify which function is d ...

Is there a way to use AJAX for transferring a value?

I am looking to transmit a value to a php-script (servo.php) that will then write the received data in a file (/dev/servoblaster). The script section of my HTML file (index.html): <script> function tiltt() { var tilt = document.getElementById("tilt ...