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!

oxwall
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.

Premium Service

If you seek a custom feature developed for your website or need 24/7 premium support to help you get started with your social network or Skadate dating website, save hours of searching online or wasting money on unnecessary plugins, get in touch with me and let's discuss a suitable plan for your project. Best thing about this service is that you are never placed on hold and get to talk to an expereinced Oxwall/Skadate developer.

Get in Touch

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