The CSS Animation isn't Showing Up

I attempted to add an animation to a specific group inside an SVG element. Unfortunately, I noticed that the animation is either not being applied or it is getting overridden, as indicated by the strike through in Chrome Developer Tools. The cause of this issue remains unknown to me at this time.

Snippet of the animation code:

.ghost {
  animation: float 3s ease infinite;
}

@keyframes float {
  50% {
     transform: translate(100px, 100px);
  }
}

I would share the HTML but it's quite lengthy due to numerous SVG paths. Instead, you can find the Codepen link here: ghost

Thank you in advance for any assistance! I'm currently unsure about the cause of this issue.

cssanimationsvg

Answer №1

Don't forget to include your vendor prefixes. See the example below:

.transparent {
  -moz-animation: fadein 3s ease infinite;
}

@-moz-keyframes fadein {
  50% {
     -moz-transform: translate(100px, 100px);
  }
}

If you want a quick solution, consider using Auto-prefixer in CodePen's CSS editor. Check out how it works with Auto-prefixer enabled:

Codepen

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

Is the navbar-nav being unexpectedly placed below the navbar-brand?

As my screen width decreases to 767px, the navigation collapses as expected. However, at 768px, the navbar-nav drops below the navbar-brand until reaching 795px where they realign again. These values may vary based on the size of your navigation. Check o ...

htmlcsstwitter-bootstrap-3

Thumbnail vanishes upon being selected

To access my template site currently, please click here. Currently, the first thumbnail on my website is set up to display a gallery of images in FancyBox once clicked, similar to a question asked on StackOverflow that you can view here. Below is a snipp ...

jqueryhtmlcssfancybox

The way Firefox handles CSS rotation is distinct from the rotation method used in

I am attempting to create a 3D rectangle (parallelepiped) that users can manipulate using arrow keys. The functionality works smoothly in Chrome, but I have noticed discrepancies in the transitions when testing in Firefox. Please take a look at this fiddle ...

javascripthtmlcssgoogle-chromefirefox

Is there a way to prevent Bootstrap 4's grid system from splitting column content when resizing the browser window?

Just delving into Bootstrap's grid system for the first time here, so bear with me if this sounds silly. My goal is to create a 3 column page that is responsive, featuring an image and a Spotify player in each column. Everything looks good on a full ...

htmlcssbootstrap-4

Stop the context menu from popping up when the element is right-clicked

Is there a way to create a custom right-click interaction for an element on my website, <div class="myElement"></div>? I want to avoid the default context menu from popping up when the user right-clicks on this element in order to enhance the u ...

javascripthtmlcss

Operate a seamless resizing of container divs within the Bootstrap carousel to avoid any sudden "jump" in size adjustments

In my current project, I am faced with the challenge of smoothly resizing container divs as users switch between image or video assets of varying sizes/heights within a Bootstrap carousel. Currently, the resizing process appears to be abrupt and not visua ...

javascripthtmlcsscarouselbootstrap-5

Unable to modify the CSS of a template downloaded for free in a custom CSS file - changes have no impact. What could be the reason behind this

After downloading a free bootstrap template, I attempted to change the style using a custom CSS file. However, the CSS in the template did not adjust as expected. Changing background colors and text colors had no effect. Why isn't this working? Could ...

htmlcssbootstrap-5

Tap and conceal feature on a mobile website

I seem to be facing a JavaScript challenge. On the desktop version of my website, I've managed to create a functionality where hovering over a button reveals some text, and clicking anywhere else on the site hides the text. However, I'm now stru ...

javascriptjquerycss

Arranging divs in a stack and implementing a toggle function for displaying and hiding them

I am currently enrolled in a web development course and am eager to explore beyond the limitations of the class. I successfully created a jQuery slide show in one div, and now I want to showcase additional features in two other divs, stack them together in ...

javascriptjqueryhtmlcssstack

Guide to aligning an icon and p tag on one line using materializecss

I am currently working with materialize css and material icons. I am attempting to display an icon next to a set of numbers, but I am unsure how to achieve this. Below is the code snippet in question: <i class="material-icons">person</i> <p ...

htmlcssmaterial-designmaterialize

switching the CSS class of a different child element from its parent

Having just started working with jQuery, I'm struggling to figure out how to target specific elements when clicking on toggle buttons. My goal is to toggle the class of each respective text container (from collapsed to expanded) when its correspondin ...

jqueryhtmlcss

The menu using sprites does not function properly when placed within a fixed position div

On this platform, I've discovered a slew of valuable resources for creating a fixed position menu and a sprite based rollover menu. Nevertheless, I'm encountering difficulties when attempting to merge the two together. Despite my best efforts, I ...

csssprite

Images displayed on cards using BOOTSTRAP

I'm interested in creating cards with categories such as Men, Women, and Kids. I envision these cards to have a design similar to the ones shown here. My goal is for users to be able to click on one of the cards and be directed to either the Men or W ...

htmlcssbootstrap-4e-commerce

Creating a two-column post loop in Wordpress is a great way to display content in a

I've been attempting to separate posts for a long time without success. No matter what variations I try, the result is always either a single post or duplicating all of them. In other words, multiple posts are not displaying as intended. If anyone ha ...

phpcsswordpress

Column with a bottom aligned div

My current layout in Bootstrap 4 consists of four columns, but I am facing an issue where one of the columns with longer text is causing misalignment of the "buttons" at the end. https://i.sstatic.net/lWFgQ.png Below is the HTML code: < ...

htmlcsstwitter-bootstrapbootstrap-4

Implement a CSS transition when switching between images

On my website, I have a feature that switches between a down arrow and an up arrow. You can view it here. I would like to implement a CSS transition so that there is a brief pause between the switch. How can I achieve this? Below is the code snippet: ...

javascriptjqueryhtmlcss

Continuously update the content within a paragraph using jQuery

After searching for a jQuery animation that would constantly change text within a paragraph, I stumbled upon a solution at this link : Text changing with animation jquery. However, I encountered a challenge as I wanted to include a bootstrap button beneath ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using Javascript to drag a window based on its components

, I am faced with an interesting dilemma. After constructing a Windows application utilizing TideSDK with HTML, CSS, and Javascript, the decision was made to eliminate its title bar in order to achieve a more widget-like appearance. However, this removal h ...

javascripthtmlcsstidesdk

Listening for an event or using a CSS pseudo-class to detect when the scrollbar becomes

Are there any JavaScript event listeners or CSS pseudo classes that can detect when a scrollbar appears and disappears? For example, on Mac OS and Windows Internet Explorer 10 or newer, the scrollbars are hidden by default but appear when scrolling begins. ...

javascripthtmlcssjquery-eventspseudo-class

Tips for choosing checkboxes that have a opacity of 0.5

Is there a way to target checkboxes with an opacity of 0.5? The selector :checkbox[style~='opacity: 0.5'] seems to be ineffective in selecting them. ...

jquerycssjquery-selectorsdom-traversal