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.
Did you get the answer you were searching for?
Save hours of searching online or wasting money testing 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 Answers for Free!
Ask a question related to this topic and get immediate answers from other community members in 48hrs or less. Contribute by answering members questions.
Ask Question
Premium Service
Whether it's a custom plugin, theme or dedicated support needed to get you started on your project, get professional 24/7 support tailored to your need.
Get in Touch
Or just leave a comment...
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!