Animation effects can be applied to a wide range of CSS properties, including; width, height, opacity, background-colour, transforms (skew, rotate, scale, translate) and plenty more.
Why use CSS animations?
Animation can help visitors to visualise a story using movement or engagement, such as pressing a button or opening a new page. By using animation we are trying to visualise various steps and processes in order to make them look more natural, to invoke action, or to make the design more appealing.
When using CSS animations it is best to start with the use of small elements with motion. Animation is the means to a goal, and not the goal itself. You shouldn't just include it wherever you want to. The use must be relevant and justified.
Animation is great for making a website design unforgettable and bespoke. They are still widely used despite various considerations with load time or unresponsiveness. The main thing that should be considered is their impact on usability.
Using CSS animations with WebBoss®
Once you have finished setting up your site, or you are using an existing site I am going to show you how to add animation to your logo and buttons.
Animating your logo
Firstly, you will need to set an image as your website logo (if you haven't already done so).
So navigate to 'Edit Website Design', then 'Edit Background Images' and load the relevant style. In most cases this should be the same as your active style.
Then select the image you would like to set as your logo by selecting the number 1 button.
Once your logo is set, you can now choose from a list of animation properties. Scroll back up the page and you will see, 'logo animation'.
I have chosen 'Pulse Forever', this means my logo will pulsate continually. Check it out at http://www.jakesmith.blogboss.co.uk/.
If you would like a quick preview into what all the animations actually do check out https://daneden.github.io/animate.css/.
Adding a button and animating it
Now we have animated the logo, you can animate a button by navigating to 'Edit Pages', and open the page where you would like the button to be placed. In the page simply type out what you would like the button to say, so in this case I simply put 'Hover over me'. Then simply double click on the word (or highlight it, if you prefer) you have just typed.
Now navigate to the 'Format' tab at the top then 'Formats'-'styles' then select the colour you would like and this will then create the button.
Now we have created the button double click it again to select the whole button.
Navigate to Format at the top, then 'Formats'- 'Hover Effects' – and select the effect you would like, why not create a few buttons then choose a different hover effect on each to see what you like, now experiment and see what animations you will fall in love with.
A few sites that use animation to perfection