Spice up your 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.
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!