{"id":14996,"date":"2022-10-10T00:47:45","date_gmt":"2022-10-09T19:17:45","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-css3-works-just-on-google\/"},"modified":"2022-10-10T00:47:45","modified_gmt":"2022-10-09T19:17:45","slug":"solved-css3-works-just-on-google","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-css3-works-just-on-google\/","title":{"rendered":"[Solved] css3 works just on google"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

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:<\/p>\n

    #loading {\n    margin: 80px auto;\n    position: relative;\n    width: 100px;\n    height: 100px;\n    -webkit-border-radius: 50px;\n       -moz-border-radius: 50px;\n            border-radius: 50px;\n    background: #ccc;\n    font: 12px \"Lucida Grande\", Sans-Serif;\n    text-align: center;\n    line-height: 100px;\n    color: white;\n    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);\n    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);\n    box-shadow: 0 0 5px rgba(0,0,0,0.5);\n}\n#loading:before {\n    content: \"\";\n    position: absolute;\n      left: -20px;\n       top: -20px;\n    bottom: -20px;\n     right: -20px;\n    -webkit-border-radius: 70px;\n       -moz-border-radius: 70px;\n            border-radius: 70px;\n    background: #eee;\n    z-index: -2;\n    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);\n    -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);\n    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);\n}\n#loading span {\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-left: 50px solid transparent;\n    border-right: 50px solid transparent;\n    border-top: 80px solid rgba(255,255,255,0.7);\n    z-index: -1;\n    top: -28px;\n    left: 0px;\n    -webkit-animation: ticktock 5s linear infinite;\n    -webkit-transform-origin: 50px 80px;\n    animation: ticktock 5s linear infinite;\n    transform-origin: 50px 80px;\n}\n#loading strong {\n    overflow: hidden;\n    display: block;\n    margin: 0 auto;\n    -webkit-animation: expand 2.5s linear infinite;\n    animation: expand 2.5s linear infinite;\n}\n\n@-webkit-keyframes expand {\n    0% {\n            width: 0;\n    }\n    100% {\n            width: 60px;\n    }\n}\n\n@-webkit-keyframes ticktock {\n    0% {\n            -webkit-transform: rotate(0);\n    }\n    100% {\n            -webkit-transform: rotate(360deg);\n    }\n}\n        @keyframes expand {\n    0% {\n            width: 0;\n    }\n    100% {\n            width: 60px;\n    }\n}\n\n@keyframes ticktock {\n    0% {\n            transform: rotate(0);\n    }\n    100% {\n            transform: rotate(360deg);\n    }\n}\n<\/code><\/pre>\n
JSfiddel<\/a><\/p>\n
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-.<\/p>\n
For information about which extensions to use there are sites<\/a> that tell you which browser versions support which extensions.<\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            8<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved css3 works just on google <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] 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; … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,1723,1209],"class_list":["post-14996","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-firefox","tag-internet-explorer"],"yoast_head":"\n[Solved] css3 works just on google - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-css3-works-just-on-google\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] css3 works just on google - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] 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; ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-css3-works-just-on-google\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-09T19:17:45+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-css3-works-just-on-google\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-css3-works-just-on-google\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] css3 works just on google\",\"datePublished\":\"2022-10-09T19:17:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-css3-works-just-on-google\\\/\"},\"wordCount\":102,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"css\",\"firefox\",\"internet-explorer\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-css3-works-just-on-google\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-css3-works-just-on-google\\\/\",\"name\":\"[Solved] css3 works just on google - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-10-09T19:17:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-css3-works-just-on-google\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-css3-works-just-on-google\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-css3-works-just-on-google\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] css3 works just on google\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] css3 works just on google - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-css3-works-just-on-google\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] css3 works just on google - JassWeb","og_description":"[ad_1] 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; ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-css3-works-just-on-google\/","og_site_name":"JassWeb","article_published_time":"2022-10-09T19:17:45+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-css3-works-just-on-google\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-css3-works-just-on-google\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] css3 works just on google","datePublished":"2022-10-09T19:17:45+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-css3-works-just-on-google\/"},"wordCount":102,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","firefox","internet-explorer"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-css3-works-just-on-google\/","url":"https:\/\/jassweb.com\/solved\/solved-css3-works-just-on-google\/","name":"[Solved] css3 works just on google - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-09T19:17:45+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-css3-works-just-on-google\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-css3-works-just-on-google\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-css3-works-just-on-google\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] css3 works just on google"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/14996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=14996"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/14996\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=14996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=14996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=14996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}