3352

Chrome Keyframe animation not working

Question:

I am currently trying to implement this <a href="http://codepen.io/anon/pen/EfcGl" rel="nofollow">Preloader Codepen</a> and its working in IE and Firefox but not Chrome Version 36.0.1985.125 m.

Any idea why the animation does not run in Chrome?

body{background:#ECF0F1} .preloader{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100px; height:100px; } .preloader hr{ border:0; margin:0; width:40%; height:40%; position:absolute; border-radius:50%;animation:spin 2s ease infinite } .preloader :first-child{ background:#19A68C; animation-delay:-1.5s } .preloader :nth-child(2){ background:#F63D3A; animation-delay:-1s } .preloader :nth-child(3){ background:#FDA543; animation-delay:-0.5s } .preloader :last-child{ background:#193B48 } @-webkit-keyframes spin{ 0%,100%{-webkit-transform:translate(0)} 25%{-webkit-transform:translate(160%)} 50%{-webkit-transform:translate(160%, 160%)} 75%{-webkit-transform:translate(0, 160%)} } @keyframes spin{ 0%,100%{transform:translate(0)} 25%{transform:translate(160%)} 50%{transform:translate(160%, 160%)} 75%{transform:translate(0, 160%)} }

Answer1:

Looks like you're missing the -webkit- prefixes on

.preloader hr { -webkit-animation: spin 2s ease infinite; }

and the -webkit-animation-delay for each of the children?

Answer2:

You have to include the vendor prefixes for all the tags.

body { background: #ECF0F1; } .preloader { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100px; height: 100px; } .preloader hr { border: 0; margin: 0; width: 40%; height: 40%; position: absolute; border-radius: 50%; -moz-animation: spin 2s ease infinite; -o-animation: spin 2s ease infinite; -webkit-animation: spin 2s ease infinite; animation: spin 2s ease infinite; } .preloader :first-child { background: #19A68C; -moz-animation-delay: -1.5s; -o-animation-delay: -1.5s; -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } .preloader :nth-child(2) { background: #F63D3A; -moz-animation-delay: -1s; -o-animation-delay: -1s; -webkit-animation-delay: -1s; animation-delay: -1s; } .preloader :nth-child(3) { background: #FDA543; -moz-animation-delay: -0.5s; -o-animation-delay: -0.5s; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .preloader :last-child { background: #193B48; } @-moz-keyframes spin { 0%,100% { -moz-transform: translate(0); } 25% { -moz-transform: translate(160%); } 50% { -moz-transform: translate(160%, 160%); } 75% { -moz-transform: translate(0, 160%); } } @-webkit-keyframes spin { 0%,100% { -webkit-transform: translate(0); } 25% { -webkit-transform: translate(160%); } 50% { -webkit-transform: translate(160%, 160%); } 75% { -webkit-transform: translate(0, 160%); } } @keyframes spin { 0%,100% { transform: translate(0); } 25% { transform: translate(160%); } 50% { transform: translate(160%, 160%); } 75% { transform: translate(0, 160%); } }

Recommend

  • How to use jquery to create progress bar for loading an image?
  • Recommended Javascript Image preloader [closed]
  • 'rails server' command not working in terminal
  • ImageView images seem pixelated and low quality
  • jParallax trouble
  • Symfony2 redirect to https route fails (uses wrong port)
  • PostgreSQL 9.x - pg_read_binary_file & inserting files into bytea
  • Making header act like google chrome mobile app address bar
  • Basic many-to-many left join query
  • Why isn't obj.style.left = “200px”; working in this code?
  • Javascript, Regex - I need to grab each section of a string contained in brackets
  • Floated image with variable width and heading with background image
  • Remove final comma from string in vb.net
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Blackberry - Custom EditField Cursor
  • preg_replace Double Spaces to tab (\\t) at the beginning of a line
  • Custom validator control occupying space even though display set to dynamic
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Google Custom Search with transparent background
  • Disable Enter in editText android
  • Android fill_parent issue
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • Body moving without any force applied? (Box2d)
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Can Jackson SerializationFeature be overridden per field or class?
  • How to set/get protobuf's extension field in Go?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • How to check if every primary key value is being referenced as foreign key in another table
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • Android Studio and gradle
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • python regex in pyparsing
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Android Google Maps API OnLocationChanged only called once
  • python draw pie shapes with colour filled