Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts

    Thumbs down css3 animation not working in firefox

    hey guys,
    i have a css3 animation working in chrome, but wont work in firefox

    heres the css

    Code:
    @-webkit-keyframes movingbox{
    			0%{left:0%;}
    			50%{left:100%;}
    			100%{left:0%;}
    		}
    
    .ball {
    			width: 8px;
    			height: 8px;
    			position: absolute;
    			background: white;
    			border-radius: 50px;
    			box-shadow: 0 0 20px white;
    			left:0%;
    			top: 75px;
    			-webkit-animation: movingbox 10s infinite;
    			-moz-animation: movingbox 10s infinite;
    			-o-animation: movingbox 10s infinite;
    			animation: movingbox 10s infinite;
    
    			-webkit-animation-timing-function:linear;
    			-moz-animation-timing-function:linear;
    			-o-animation-timing-function:linear;
    			animation-timing-function:linear;
    			z-index: 0;
    }
    see it here http://aaron-armstrong.com/tophat/index.html

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    You are missing the other browser prefixes.

    Code:
    @-webkit-keyframes movingbox{
        /* you have this one in your code above */
    }
    @-moz-keyframes movingbox{
    
    }
    @-o-keyframes movingbox{
    
    }
    @keyframes movingbox{
    
    }
    http://coding.smashingmagazine.com/2...me-animations/
    Last edited by Sammy12; 09-15-2012 at 04:10 AM.

  • Users who have thanked Sammy12 for this post:

    aaronhockey_09 (09-15-2012)

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    Quote Originally Posted by Sammy12 View Post
    You are missing the other browser prefixes.

    Code:
    @-webkit-keyframes movingbox{
        /* you have this one in your code above */
    }
    @-moz-keyframes movingbox{
    
    }
    @-o-keyframes movingbox{
    
    }
    @keyframes movingbox{
    
    }
    http://coding.smashingmagazine.com/2...me-animations/
    of course, how could i forget
    thanks


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •