Radial css3 animation around a circle - animation

I'm trying to make a div rotating around a circle that is already rotating on himself in css3.
I've tried to use webkit frame, but it don't work well.
Have you some examples of this ?
thanks

This is 1 great example: CSS3 Solar System
The code used is here

Related

Perspective transform in THREE JS

I found few incomplete threads regarding Perspective Transform using Three JS.
I was looking to have a rectangle with video texture on it, and each corner one after another will animate to fullscreen or in reverse. As each corner animates the texture should stretch. Something like this demo but in Three JS.
It will be great help if someone can point to an example, docs or resources to get this effect.

Unity3D: Sprite renderer vs image renderer issues on canvas

I'm using sprites for an animated menu in my game.
I tried two methods:
Image Renderer: Replacing the image per frame with the sprite slice in the animation window
Sprite Renderer: Same method
I'm playing the sprite animation with no loop then rotating the transform on the z-axis.
The problem is that with the image the Screen Space overlay works well but the rotation of the transform causes the sprite to look glitchy and rough. With the sprite renderer however the Screen Space must be put to Camera and the sprites get placed between other assets in the world.
Example: http://postimg.org/image/436q9jvax/
Is there a way to either fix the roughness on the rotation using image or force the Camera Screen Space on top? My only concern with the 2nd option would be in relation to responsiveness for multiple devices.
The easiest fix was to apply "sorting layers" to the canvas with the sprite renderers on to keep it on top.
I did however incorporate #beuzel's idea about separate cameras in the end and opted for 2D sprites with physics instead of a 3D rendered animation on canvas.
http://postimg.org/image/6qmtiirb9/
Thanks for making the good sample. A fix for the menu intersecting the world is using a seperate camera for the GUI layer. The rough animation might be a pixel perfect setting in the sprite rendering (just guessing).
I don't have enough reputation points to write this as a comment.

Adobe Edge Animation Mouse Wheel Smooth Scroll

I have made parallax scrolling by using Adobe Edge Animation there is a problem with scroll by mouse wheel. How can i make it smooth.
http://bestbuypakistan.com/Oil/Oil.html
To me it looks like your animations stall every few pixels as you're scrolling. This is simply in the fluid motion of the animation.
You'll need to redo the keyframing for the animations and it seems like you're using x and y to animate the motions. Try using motion paths instead to get a more fluid and slick feel to the effect.
I know this isn't much of an answer, but I hope I was able to help in some way! :)
Cheers!

Animate Sprite using color in top to bottom effect

How to spread color Top to Bottom using CCTintTo method in sprite.
Because i am using CCTintTo method to spread color in sprite. But i want to look like spreading color in top to bottom.
What to do for this types of animation.
Thanks in advance.
If you are using cocos2d 2.0+, you could write a shader to do this, and set the shaderProgram property of the sprite. Not that hard, follow the examples in the distribution. My first shader took me .5 work days to get to work, and maybe another .5 workday to properly integrate that technique properly in my overall software architecture. g'luck :).
Look here for an introduction to shaders, play with it in a side project until you are comfortable to integrate in your main trunk.
That's not possible with color tinting. Changing a node's color property or using the tint actions will only tint the entire sprite with a single color, there will be no gradient.
You would have to custom draw the sprite and apply/adapt the gradient rendering code from CCLayerGradient.
Yes CCLayerGradient is what you are looking for.By the way what technique you are using for coloring.If you are using CGContextSetRGBFillColor method to fill the sprite color then it would be tricky but if you are using images to fill color then nice sequence of images plist can be used to produce animation which will give you the exact effect you are looking for.
Take the sequence of images and animate them using CCSpriteBatchNode otherwise if you want to use RGB colors to fill sprite then you have to look for gradient effect.

Applying a CSS3 transform to an SVG element in Safari

I am using SVGs to build up a cartoon style street scene, and I wanted to have clouds scrolling across the scene. To do this, I was using a setTimeout or requestAnimationFrame (dependant on browser) to update the SVGs (x) position, but the FPS counter dropped from 30fps to 7fps on the iPad because of it. I tried again using SVG transform="translate(x, y)" to see if performance increased. It did not.
Finally, I thought I would try with CSS3 transforms, and applied it directly to the SVG element:
This worked fine in chrome, and firefox. But Safari (including iPad) doesn't seem to accept having css transforms on an SVG.
Is this a known bug? Or is there a way around this? Thanks.
Okay, I'm not sure if I'm 100% right about this, but it seems that setting the "x" value of a transform every frame for any kind of movement (especially in a complex parallax situation where at least 5 layers are moving at the same time) is a very bad idea.
Also after much research it appears SVG1.1 does not support CSS3 transforms across all browsers for certain. SVG transforms are okay but CSS3 is not.
Finally to fix this solution: I simply reset all x, y positions to (0, 0), and positioned everything with -webkit-transform: translate3d(x, y, z). (and variations of for other browsers).
Note: I use translate3d even for a 2d parallax effect and leave z at 0. translate3d is hardware accelerated and has a visible performance increase on the iPad.
I have no problem with this, you must be doing something wrong.
Working example: http://jsfiddle.net/pqyBJ/

Resources