The astonishing font-icon animation feature is exclusively functional on code-pen

I have a problem with a font-icon animation code. When I run it on my local server, the animation doesn't work. It only works on http://codepen.io/TimPietrusky/pen/ELuiG

I even tried running it on


http://jsfiddle.net/qjo7cf3j/

@import url(http://weloveiconfonts.com/api/?family=maki);

html,
body {
 height: 100%;
 width: 100%;    
 overflow: hidden;
 background: #333;
}

[class*="maki-"]:before{
  font-family: 'maki', sans-serif;
}

*:after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  z-index: -1;
  width: 0;
  height: 0;
}

[class*="maki-"] {
  position: absolute;
  margin: 0;  
  color: #fff;
  font-size: 2em;
}

.wrapper {
  height: 140%;
  width: 120%;
  transform: rotate(-3deg) translate(-10%, -15%);     
}

.night {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  animation: night 45s infinite forwards;
}

@keyframes night {
  0%, 30%, 100% {background:rgba(0, 0, 0, 0);}   
  55% {background: rgba(0, 0, 0, .6);}
}

.sky {
  position: relative;
  z-index: 0;
  background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/bedge_grunge.png);
  height: 50%;    
  width: 100%;
  animation: rollin-bg 25s linear infinite forwards;
}

.ground {
  position: absolute;
  z-index: 1;
  background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
  height: 50%;    
  width: 100%;
  animation: rollin-bg 7s linear infinite forwards;
}

@keyframes rollin-bg {
  0% {background-position: 100%;}   
  100% {background-position: 0;}
}

.sun {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 10%;
  width: 2em;
  height: 2em;
  font-size: 4em;
  line-height: 1;
  animation: circle 45s linear infinite;
  transform-origin: 50% 3.85em;
}

.sun [class*="maki-"] {
  color: rgba(240, 180, 0, .2);
  text-shadow: 0 0 .35em rgba(240, 240, 0, .7);
}

.sun > div {
  animation: inner-circle 45s linear infinite;
}

@keyframes circle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes inner-circle {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.maki-bicycle {
  left: 50%;
  z-index: 4;
  margin: -.85em 0 0 -.5em;  
  color: rgba(30, 30, 140, .95);
}

.maki-tree-1[data-child="1"] {
  margin: -1em 0 0 5%; 
  z-index: 6;
  animation: rollin 5s linear infinite;
  font-size: 2.4em;
  color: rgba(0, 110, 0, 1);
}

.maki-tree-1[data-child="2"] {
  margin: -1em 0 0 85%;
  z-index: 2;
  animation: rollin 12s linear infinite;
  font-size: 1.6em;
  color: rgba(0, 110, 0, .5);
}

.maki-tree-1[data-child="3"] {
  margin: -1em 0 0 25%;
  z-index: 2;
  animation: rollin 17s linear infinite;
  font-size: 1.2em;
  color: rgba(0, 110, 0, .3);
}

.maki-giraffe {
  margin: .25em 0 0 5%;
  z-index: 6;
  animation: rollin 12s linear infinite reverse;
  font-size: 10em;
  color: rgba(255, 255, 10, .9);
}

.maki-giraffe:after {
  right: -3em;
  content: '\e82a \e82a \e82a \e82a \e82a';
  font: .2em 'Maki', sans-serif;
  letter-spacing: .2em;
  width: 3em;
  color: rgba(0, 0, 0, .6);
  box-shadow:
    0 .45em 0 .75em rgba(255, 255, 255, .4),
    1em .35em 0 .75em rgba(255, 255, 255, .4),
    2.25em .25em 0 1.05em rgba(255, 255, 255, .4)  
  ;
  border-radius: 50%;
  transform: translate(2.3em, .55em) rotateY(-180deg);
}

.maki-grocery-store {
  margin: -.35em 0 0 5%;
  z-index: 5;
  animation: rollin 22s linear infinite;
  font-size: 4em;
  color: rgba(220, 0, 10, .7);
}

.maki-commerical-building[data-child="1"] {
  margin: -1em 0 0 5%; 
  z-index: 3;
  animation: rollin 6s linear infinite;
  font-size: 7em;
  color: rgba(120, 0, 120, .8);
}

.maki-commerical-building[data-child="2"]  {
  margin: -1em 0 0 5%; 
  z-index: 2;
  animation: rollin 14s linear infinite;
  font-size: 4em;
  color: rgba(0, 120, 120, .4);
}

.maki-heliport {
  margin: -3.5em 0 0 2em;  
  z-index: 1;
  color: rgba(30, 30, 30, .45);
  font-size: 1.25em;
  animation: rollin 26s linear infinite reverse 2s;
}

@keyframes rollin {
  0% {margin-left:105%}   
  100% {margin-left:-15%;}
}
<div class="night"></div>
<div class="wrapper">
  <div class="sun">
    <div class="maki-fast-food"></div>
  </div>
  
  <div class="sky"></div>

  <span class="maki-bicycle"></span>
    
  <span class="maki-tree-1" data-child="1"></span>
  <span class="maki-tree-1" data-child="2"></span>
  <span class="maki-tree-1" data-child="3"></span>
    
  <span class="maki-giraffe"></span>

  <span class="maki-grocery-store"></span>
    
  <span class="maki-commerical-building" data-child="1"></span>
  <span class="maki-commerical-building" data-child="2"></span>
    
  <span class="maki-heliport"></span>
   
  <div class="ground"></div>
</div>

cssfont-awesome

Answer №1

The main issue causing the lack of functionality in your customized version of the animation is the absence of prefix declarations for certain browsers.

In the framework CodePen, a useful tool called -prefix-free is employed to automatically add the necessary prefixes to CSS properties, hence ensuring smooth operation. An alternative option is to use Autoprefixer, which serves the same purpose. However, if you choose not to employ either of these tools, the CodePen example will also fail because the (S)CSS code does not include the essential prefixed versions required by the CSS attributes.

To overcome this obstacle, you have two choices: incorporate a similar library into your code or manually insert the appropriate prefixed attributes specifically for Chrome and possibly other browsers as well.

A related problem concerning different sets of properties was raised and resolved here.

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 difficulty with adding a floating button to a Django template

I have been attempting to create a floating button similar to the one demonstrated in this video. Unfortunately, I am encountering difficulties in replicating the same effect while trying to incorporate it into one of my Django templates. Below is the HTM ...

htmlcssdjango

Lines that are next to each other within an svg path and have a stroke

I'm working with an SVG that contains multiple lines within a path element. <path stroke-width="13" stroke="black" fill="orange" d="M 100 100 L 300 100 Z L200 300 z"/> Due to the stroke-width, the lines a ...

htmlcsssvg

Guide on placing images in a grid using CSS

Exploring a new way to arrange images in grid style with a box underneath. Seeking advice on achieving this specific layout shown in an image. Current progress in positioning can be seen in this screenshot. Desired adjustments include aligning the far ri ...

htmlcss

Creating a changing text color using Material UI and React

How can one dynamically set the text color based on the background color of a component using Material-UI API? If component A has a light background, then the text should be dark. For component B with a black background, the text should be light. (I have ...

cssreactjsmaterial-ui

JQuery Mobile Listview Filter Not Working: Troubleshooting Tips

Recently diving into the world of jquery mobile, I've managed to successfully create a homepage and a sub-page labeled "bible_studies," complete with a dynamic list generated through AJAX. Everything seems to be functioning perfectly except for one i ...

jqueryajaxhtmlcssjquery-mobile

Struggling to effectively align the footer div in a responsive design

Check out this GitHub link to access the HTML file and CSS: https://github.com/xenophenes/pgopen-splash2016 I'm facing an issue with the footer text alignment. Despite my efforts, I can't seem to center it properly as it keeps appearing slightly ...

htmlcss

Website layout looking unique due to pixel width adaptation from standard width

I'm currently working on a website with full width design. On my computer, the website displays as full width, but on other computers it shows extra space on the sides. How can I ensure that this website is truly full width? .wrapper_boxed { wid ...

htmlcss

Displaying random divs and subsequently animating them downwards using JavaScript

I am in the process of creating a random appearing div that then falls down. Here is the code I have so far: $(document).ready(function(){ $('#test').animate({top: 80 + '%'},900); }); <div id="test" style="background:#98bf21;heigh ...

javascriptjqueryhtmlcss

Switch up the like button for users who have previously liked a post

Greetings, I trust everything is going well. I am attempting to implement a feature where users can like a post or article created by others using a button. I have established a const function named "getAPostLikeRecord()," which retrieves a list of users w ...

javascriptcssreactjsfrontend

Animation failing to be queued properly

Here is a snippet of code that moves a heading icon back and forth when you hover over the heading: jQuery('h1.heading').hover( function(){ $icon = jQuery('.heading-icon', this); if( ! $icon.is(':animated') ){ ...

javascriptjquerycssanimationjquery-animate

Is HTML5 data-target used for loading pages?

Currently, I am working with some HTML5 code: <li class="tile google" data-target-activation="click" data-target="loading"> <div> <a href="#">Search Google</a> <h2>Google</h2> </div> </li> Upon ...

jquerycsshtmlloading

The offcanvas menu in the NextJS Tailwind website does not handle hover or tap events properly when outside of the parent dimensions

My header includes an off-canvas menu that slides in from the right side. Everything seems to be working fine, except for one issue: when the menu is open and visible, the mouse and touch events pass through it to the content underneath. Check out the cod ...

cssreactjsnext.jstailwind-cssoff-canvas-menu

Is there a method to consistently keep the horizontal scrollbar in view for the MUI Data Grid at all times?

I have a Data table with virtualized columns, totaling more than 25 in number. Users can easily scroll horizontally using a trackpad, but without one, they may struggle to access all the columns due to the delayed appearance of the scrollbar. Is there a w ...

cssreactjsmaterial-uidatagridhorizontal-scrolling

Webpack Encore: SCSS import order causing unexpected issues

When developing with Symfony + Webpack Encore, I aim to split styles into "layout" and "page-based" categories for convenience. However, despite this organization, I still prefer to compile all styles into a single CSS file. To achieve this, I structure my ...

csswebpacksass

Using jQuery to Drag: Creating a draggable effect on a div element

I recently posted a question, but I feel like I need to rephrase it to make it more general. Basically, I have an element that can be moved around and resized using jQuery. I used CSS to attach another div to the right of this element. Initially, when you ...

jqueryhtmlcssdrag

Encountering a vast expanse of empty white void

Attempting to create a scrollbar within my content div instead of the entire window seems to be causing a large white space in the content box, and I'm struggling to understand why. Can someone take a look and help me identify the issue? You can view ...

jqueryhtmlcssscrollbar

How can I retrieve the offset top of a td element in relation to its parent tr element?

Here is some sample dummy HTML code: <table> <body> <tr> <td id="cell" style="height: 1000px; width: 200px;"></td> </tr> </body> </table> I am looking to attach a click event ...

javascriptjqueryhtmlcss

Iterating over an array and displaying elements on the webpage

Struggling to access an array and loop through it, but only able to print out one element instead of all. Need a hint on how to solve this issue. See my code below: let toppingsCount; const burger = document.createElement('div'); const toppingsD ...

javascripthtmlcssdomcss-selectors

Using the "align" attribute is considered outdated and not recommended in HTML5 documents

I have encountered an error when using the align attribute. How can I fix this issue with the correct HTML5 compatible syntax? <table style="margin: 0 auto;"> <tbody> <tr> <td><input typ ...

jquerycsshtmljsp-tags

Struggling to connect CSS to HTML on Github Pages

I'm new to using Github, and I noticed that when I open the website, my HTML code is displaying without the associated CSS. Here is a snippet of my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

htmlcssgithub