css3 works just on google

Question

This is a JSFiddle http://jsfiddle.net/6hLf6/

This is the css

#loading {
            margin: 80px auto;
            position: relative;
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50px;
               -moz-border-radius: 50px;
                    border-radius: 50px;
            background: #ccc;
            font: 12px "Lucida Grande", Sans-Serif;
            text-align: center;
            line-height: 100px;
            color: white;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
            box-shadow: 0 0 5px rgba(0,0,0,0.5);

        }
        #loading:before {
            content: "";
            position: absolute;
              left: -20px;
               top: -20px;
            bottom: -20px;
             right: -20px;
            -webkit-border-radius: 70px;
               -moz-border-radius: 70px;
                    border-radius: 70px;
            background: #eee;
            z-index: -2;
            -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
            -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
        }
        #loading span {
            position: absolute;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 80px solid rgba(255,255,255,0.7);
            z-index: -1;
            top: -28px;
            left: 0px;
            -webkit-animation: ticktock 5s linear infinite;
            -webkit-transform-origin: 50px 80px;
        }
        #loading strong {
            overflow: hidden;
            display: block;
            margin: 0 auto;
            -webkit-animation: expand 2.5s linear infinite;
        }

        @-webkit-keyframes expand {
            0% {
                    width: 0;
            }
            100% {
                    width: 60px;
            }
        }

        @-webkit-keyframes ticktock {
            0% {
                    -webkit-transform: rotate(0);
            }
            100% {
                    -webkit-transform: rotate(360deg);
            }
        }

This is the html

<div id="loading"><strong>loading...</strong><span></span></div>

This is the result:

Firefox

enter image description here

The problem in firefox that the circle is not rotating

IE11

enter image description here

It is not a circle and it is not rotating

Just chrome is working fine

could u help please?

Let me get this straight. You are using prefixed CSS (`-webkit-`) that is specifically targeted at Chrome and other Webkit browsers, and then wonder why only Chrome works? — Jon, Jun 15 '14 at 16:48
@Mooseman: I know, but that's still contrary to the claim in the question. — David says reinstate Monica, Jun 15 '14 at 16:50
@MarcoDinatsoli: ...and then Firefox shows the circle as a circle. Shocking. — Jon, Jun 15 '14 at 16:50
@MarcoDinatsoli See http://stackoverflow.com/questions/3726357/why-does-ie9-switch-to-compatibility-mode-on-my-website. — Mooseman, Jun 15 '14 at 16:51
@Mooseman if it is a problem with IE, why it is not working on Firefox though I have already added `-moz` ? — Marco Dinatsoli, Jun 15 '14 at 16:53
@DavidThomas [Opera has a low market share](http://gs.statcounter.com/). Most don't test in it, although they should. — Mooseman, Jun 15 '14 at 16:55
@MarcoDinatsoli Jokes aside, you have many `-webkit-` properties without `-moz-`, `-ms-`, or unprefixed counterparts. Just add those and you're done. — Mooseman, Jun 15 '14 at 16:59
@MarcoDinatsoli The first comment answered your question. People here are more than willing to help, but not when the person asking for help isn't willing to listen. BTW, IE11 supports the unprefixed `border-radius`. — Mooseman, Jun 15 '14 at 17:04
@Mooseman if it supports the border-radius, why it is not working on my case, and I am changing the code as you have said, every webkit I made it -moz and -ms but should i also change the @-webkit to @-moz and @-ms ? — Marco Dinatsoli, Jun 15 '14 at 17:06

Oracle · Accepted Answer · 2014-06-15T17:45:21.337

Internet explorer and Firefox use the standard extension rather than the webkit extension for animation. You need to add the standard css as well as the webkit vendor extension which would change your css to:

    #loading {
    margin: 80px auto;
    position: relative;
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;
    background: #ccc;
    font: 12px "Lucida Grande", Sans-Serif;
    text-align: center;
    line-height: 100px;
    color: white;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
#loading:before {
    content: "";
    position: absolute;
      left: -20px;
       top: -20px;
    bottom: -20px;
     right: -20px;
    -webkit-border-radius: 70px;
       -moz-border-radius: 70px;
            border-radius: 70px;
    background: #eee;
    z-index: -2;
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
#loading span {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 80px solid rgba(255,255,255,0.7);
    z-index: -1;
    top: -28px;
    left: 0px;
    -webkit-animation: ticktock 5s linear infinite;
    -webkit-transform-origin: 50px 80px;
    animation: ticktock 5s linear infinite;
    transform-origin: 50px 80px;
}
#loading strong {
    overflow: hidden;
    display: block;
    margin: 0 auto;
    -webkit-animation: expand 2.5s linear infinite;
    animation: expand 2.5s linear infinite;
}

@-webkit-keyframes expand {
    0% {
            width: 0;
    }
    100% {
            width: 60px;
    }
}

@-webkit-keyframes ticktock {
    0% {
            -webkit-transform: rotate(0);
    }
    100% {
            -webkit-transform: rotate(360deg);
    }
}
        @keyframes expand {
    0% {
            width: 0;
    }
    100% {
            width: 60px;
    }
}

@keyframes ticktock {
    0% {
            transform: rotate(0);
    }
    100% {
            transform: rotate(360deg);
    }
}

JSfiddel

This should allow your css to load on most modern browsers. However depending on what users you will be attracting it may be worth implementing other vendor extensions such as -moz- or -o-.

For information about which extensions to use there are sites that tell you which browser versions support which extensions.

before you answered, I already added -moz and -ms and it works on firefox and chrome, but your answer also works on IE. you helped me a lot man, many thanks really you are so appreciated — Marco Dinatsoli, Jun 15 '14 at 17:45
In internet explorer, the standard non-prefixed animations have been supported since version 10. I don't think version 9 had any css animation support.So for animation there is no need to include -ms. — Oracle, Jun 15 '14 at 17:56
your jfiddle is working on IE, but when I tired my code on IE it is not working, why please? is it something in configuration or setting in my IE i need to change? — Marco Dinatsoli, Jun 15 '14 at 18:08
could u check my new question please http://stackoverflow.com/questions/24232693/css3-works-on-jfiddle-but-not-on-ie — Marco Dinatsoli, Jun 15 '14 at 18:22
Try copying the CSS I posted above and see if that works, if not I don't think setting should make it work on JSFiddle but not on your site. Although I keep all of my IE settings on default for the most part since I only use it to test for compatibility. — Oracle, Jun 15 '14 at 18:24
that is what I did, i copied and paste your css and i have the problem — Marco Dinatsoli, Jun 15 '14 at 18:36

css3 works just on google

Firefox

IE11

1 Answers1