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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Setting up CSS3/HTML5 rotate animation keyframes?

    Hi, I have a spinner on my site, and at the moment its rotating in one direction, back and forth 60 degrees.. which is good, and it looks smooth, but I want it to go --

    start at -60deg - to 120deg - back to -60deg

    and I'm not sure how to add in another keyframe. Here's my code.

    Code:
    #spinner {
    	position: absolute;
    	top: -3px;
    	left: 168px;
    	margin: 0px 0 0 0px;
    	height: 72px;
    	width: 72px;
    	text-indent: 250px;
    	white-space: nowrap;
    	overflow: hidden;
    	-webkit-mask-image: url(logo.png);
    	-webkit-animation-name: spinnerRotate;
    	-webkit-animation-duration: 8s;
    	-webkit-animation-iteration-count: infinite;
    	-webkit-animation-timing-function: linear;
    }
    
    @-webkit-keyframes spinnerRotate {
    	from {
    		-webkit-transform: rotateY(-60deg);
    	}
    	to {
    		-webkit-transform: rotateY(60deg);
    	}
    }
    Thanks everyone.

  2. #2
    Regular Coder Mooseman's Avatar
    Join Date
    Sep 2010
    Posts
    123
    Thanks
    7
    Thanked 3 Times in 3 Posts
    What browser are you using? I believe only nightly Webkit builds support some of your code.

  3. #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    On the upside, it works in my plain old Safari 4, but on the downside, yeah, I need help adding in support for IE9/10 (8?) and Firefox..

    Additionally, can I do keyframes containing multiple motion tweens? example, zoom, flip, rotate, scale, etc.



    (edit - For example, I'm working on one object that -

    1. Fades opacity from 0.5 to 1.

    2. Zooms

    3. Rotates up and down about 30 degrees.

    It's not there just yet, I will post the code for this one momentarily..)
    Last edited by java_man; 04-25-2011 at 01:02 AM.

  4. #4
    Regular Coder Mooseman's Avatar
    Join Date
    Sep 2010
    Posts
    123
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Any CSS with -webkit- or -moz- etc. will only work in the one browser. -webkit- is Safari, so you're okay there. I don't know if this can help you: http://addyosmani.com/blog/css3transitions-jquery/. I haven't used it, but the demo works in IE8.

    About IE9. It works...in theory. It does not support transitions. We can only hope for IE10.

    Hope this helps!

  5. Users who have thanked Mooseman for this post:

    java_man (04-25-2011)

  6. #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Fair enough.. That clears things up a bit. Thanks!


 

Posting Permissions

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