Bring Content To Life Using CSS3 Animations

Why Use CSS3 Animations?

Animations are becoming more and more popular on the web and for good reason. Some sources suggest that humans process visual information 60,000 times faster than reading text. When visuals are moving it draws attention to the eye and keeps users engaged for longer - the ultimate goal of a great user experience.

Animations are a great way to get a point across to a user quickly, like providing directions on how to navigate through a new user interface. They can draw attention to specific elements or guide users through a process in an intuitive way. Animations are amazing at what they can accomplish but there are nuances that need to be considered to make the end result successful.

Considerations When Implementing Animations on Your Website

Most importantly, don’t get carried away with animations. If animations are used too much throughout the site they lose their value and can become obnoxious to users; this could cause them to abandon your site all together. If there are animations that are constantly running it is important to include an option for the user to turn the animations off; especially if there is sound associated with it.

Timing is crucial for successful animation implementation. Anything that runs in 0.1 of a second will seem automatic to users and won’t be perceived as an animation. Different users will notice animations at different times. For example, an older user may need 0.7 of a second to see something, where a younger person may notice it in a 0.25 of a second. A good rule of thumb is keeping the animations within 0.1 of a second and 10 seconds; you will lose people after 10 seconds.

Different Types of CSS3 Animations

There are three ways to use animation using CSS3: Transitions, Transform, and Animation Keyframes.

• CSS Transitions

  • Transitions allow you to change CSS property values smoothly from one value to another over a specified period of time. Transitions allow developers to specify a delay in seconds for the transition effect and allow you to specify how many seconds or milliseconds a transition effect takes to complete. Transitions allow full control over the timing by applying different timing functions like: ease in, ease out, ease-in-out, etc. which are very similar to animations within presentation software like PowerPoint, but with more control. There will be times when you will not want to use Transitions, like changing a font size or image size drastically; it can become shaky as it transitions.

• CSS Transform

  • Transform can work very well when you want to change a font size or image and not become shaky or jumpy. Transform has both 2D and 3D properties available. 2D Transform properties allow you to rotate, scale, move, skew, etc. your animated element. 3D Transform properties are much more fun and visually interesting, they really allow you to make elements come alive! 3D properties allow you to change position, specify how nested elements are rendered in a 3D space, change perspective, define whether an element should be visible when not facing the screen, and much more! 3D Transform also allows you to specify the methods in which you would like the element to move around; like translating, scaling, rotating, perspective, etc.

• Animation Keyframes

  • Animation Keyframes are great to use when you want to change as many CSS properties you want, as many times that you want to; this allows more control when you want an element to do more than transition from 0% to 100%. To begin using Animation Keyframes you need to declare the animation name and duration at minimum and then can use Keyframe properties to designate what points in time you want the styles to change – you can use as many style changes as you like.

Animation Examples

There are a lot of great resources and ideas for animation inspiration on the web. Here are some examples that you can look at to see different animation use cases:

• Here you have a fun example that makes filling out a form fun
• This site has great examples of directional hover effects
• Here you can see an example of animated script
• This site’s homepage uses many different applications of animation
• We can’t forget the wonderful w3schools that has many CSS Animation examples

 If you look at our website www.avibeweb.com you will see many different uses of CSS3 Animations and cool hover effects!

Animations are wonderful for drawing attention to key content or elements on a webpage. They are fun, engaging and promote a great user experience when interacting with a website. If your website could benefit from animation to drive engagement and re-engagement of your users, schedule a consultation with our team to strategize how animation can bring your content to life.