CSS Animation Examples 2
Scale and Rotate
These are examples of the scale and rotate animations, showing how the -webkit-transform-origin property works. You’ll notice that you can allow the animation origin to move around the box that it’s a part of, or you can even put it outside the box if that’s the effect you’re looking to achieve. In addition, there’s an example of the a radial gradient in action, which denotes the origin of the animation.
Fancy Gradient Rotation
This one was hard to name, hence the abomination. My first page of CSS Animation examples had some fancy rotating boxes with gradients on them. I decided that I wanted a slightly different effect, where the reflection mirrors the rotation rather than gets rotated along with the box. I did this by attaching the gradient to a different layer than the rotation.
Leave a Reply