Spinning Zooming Css Effect For Oxwall Images

Spice up your oxwall site with this cool css tweak. In case you weren’t aware, CSS animations are fantastic.  They’re smooth, less taxing than JavaScript, and are the future of node animation within browsers.  One of my favorite effects is the spinning, zooming CSS animation.  Let me show you how it’s done!

This effect uses two css controllers: The -webkit-transform property is the animator in this animation.  Define that at 0% the element is at 0 rotation and scaled to 1 — that is the original state of the element.  At 50% of the animation, the element should be rotated 360 degrees (a complete spin), and the element should grow twice in size.  At 100%, the element should return to its original scale and rotate to 720 degrees, thus looking the same as it started.

The event is assigned using the -webkit-animation-name property. Additional properties are assigned: -webkit-animation-duration makes the animation last 500 milliseconds, -webkit-animation-iteration-count directs the animation to occur only once, and -webkit-animation-timing-function sets the easing transition to ease-out.

Activating your Css Effects.

  • Login to your admin panel
  • Goto appearance
  • Click on edit theme
  • Click on css

Copy the following code into your custom CSS box and click save

It is highly recommended that you use this effect with fixed-size DOM nodes, with background images.  Using this effect with simple DOM nodes doesn’t look great.  Let me know what you think about this animation, and what you think it could use to look even better!

Leave a Reply