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
    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
    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
    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!

  • Users who have thanked Mooseman for this post:

    java_man (04-25-2011)

  • #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
    •