Content Management

CSS Animation

Content Management: Seminar Article

CSS Animation can be enacted using a variety of languages, commonly JavaScript, but in this case we will be talking specifically about CSS Animation. CSS animations are the transitions between various CSS style configurations using keyframes. HTML acts as a puppet “skeleton” and CSS is the puppet’s costume and strings. CSS can add more objects, tell HTML objects how to look, and tell all elements where to go and when, as a puppeteer would.

To begin creating a CSS Animation, you first start by styling the element you want to animate using the animation property or sub-properties. This configures the timing, duration and other details of the animation sequence; but it does not change the appearance. By using two or more @keyframes at-rule, you can define the appearance of the animation. MDN (2022) states that “each keyframe describes how the animated element should render at a given time during the animation sequence” (MDN, 2022). There is also the option to include additional keyframes that describe intermediate steps between the initial and final state of the animation.

When creating animation, there are two main properties that can be used, those are animation and transition. However, the main difference between them is that transitions can only move from one initial state to a final state but require a trigger, like a hover, and can only run once. Transitions can only run forwards when triggered and then in reverse when trigger is removed. In contrast, animations can move from initial state to final with intermediate steps between through keyframes. They can be triggered or run automatically, and can run forwards, in reverse or in alternate directions. They can also loop infinitely using the animation-iteration-count property when set to “infinite”. Therefore, animations are better suited for a series of more complex movements whereas transitions are better for creating a simple change from one state to another.

As mentioned above, one of the many benefits of using CSS Animations include being able to use many keyframes between the initial and final state. Along with their ability to be triggered or automatically run and run forwards, backwards or in alternate directions and loop. CSS Animation also has great web performance. According to MDN (2022), “animations run well, even under moderate system load… Simple animations can often perform poorly in JavaScript… The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.” (MDN, 2022). This gives the user’s chosen browser to, “control the animation sequence [allowing the browser to] optimize performance and efficiency”  (MDN, 2022). For example, “reducing the update frequency of animations running in tabs that aren’t currently visible”  (MDN, 2022). CSS animation makes it possible to animate without the use of JavaScript whilst still being able to create complex animations with a broad range of possibilities that don’t require an external library. Additionally, it can make your website more eye-catching and dynamic for your users to be more engaged and attracted to your website.

However, there are some disadvantages when using CSS Animations. These include the nature of it being able to handle multiple CSS properties and many keyframes which means the mark up could get messy. Also, using numerous keyframes can result in the butterfly effect of one alteration causing a chain reaction of the remaining keyframes needing to be altered. There is also the risk of having too many animations appear on one page unprovoked, making the site overwhelming to the user.

“Simone Jackson” animation begins with the text as the same colour as the navy blue background. Then, the text quickly changes from navy blue to white in a short fade in style as it slides in from the top of the frame to the bottom.
Fig 1: “Simone Jackson” animation gif taken from Katherine’s Typesetting Project webpage

This will be a demo about how I achieved this animation for the Typesetting Project last term. Here is a link to the page, but we inserted a gif for ease of reference while looking through this coding demo.

First, I created the actual animation itself. Here is that code:

Example code of @keyframes from my site:Explanation of element
@keyframes fall-in {
0%   
{color: #151833; top:-80px;}
100% 
{color: #FFFFFF; top:0 px;}


@keyframes @keyframes is used to show that we are building a new animation. The name that follows is how we will then put it to use in an element. (e.c. putting it into a p element in CSS).

fall-in This is the name of the animation. This is customisable.

0% This represents the point in the keyframe a certain animation occurs. 0% is the beginning of the keyframe. 50% the middle. So on and so forth. You can use any number between 0-100% for keyframes. If going the route of using multiple numbers like this, be careful and make sure your animation is smooth.

100% The end of the keyframe

{color: #151833; top:-80px;} This means that the text is starting out the same colour as the background. The text is positioned off screen, using coordinates. 

{color: #FFFFFF; top:0 px;} This is the ending point of the animation. This will mean the text falls into place in the intended place in white.

When I finished creating the animation, I applied this animation to my desired element. Then, I added other attributes I desired for my finished product.

Example code of animation:Explanation of element
#fall-in {
animation-duration: 2s;
animation-name: fall-in;
animation-iteration-count: infinite;
position: relative;}
#fall-in I put the text into a div for selecting ease.

animation-duration: 2s; Duration of the animation is 2 seconds.

fall-in Custom keyframe that I made previously.

animation-iteration-count: infinite; If its not stated how many times an animation should occur, it will only happen once. I chose to have it loop forever.

However, this is the longform code. In proper practice, the shortform writing is best. I use the shortform on my webpage. Here is that code:

Example code of animation  from my site:Explanation of element
#fall-in { animation: fall-in 2s infinite; position: relative;}#fall-in I put the text into a div for selecting ease.
animation: This is how to do shortform animation coding.

fall-in Custom keyframe that I made previously.

2s Duration of the animation is 2 seconds.

infinite; If it’s not stated how many times an animation should occur, it will only happen once. I chose to have it loop forever.

Using the element animation, this allowed me to insert the different attributes I desired. This shortform markup will make it easier to edit if necessary. This is just the beginning of the type of work that can be done using CSS Animation, and there is so much more on offer if this is an area of interest for future projects.

Animations are not limited to only text or basic shapes, there is a large range of possibilities that can be created with animation, basic or advanced. Adjusting various properties for an animation element such as the display, position, transformation, colour and other properties, can create complex animations. With this, it is possible to create eye-catching hover triggers, image accordions, dynamic backgrounds and many more.

“Image Accordion” creates a sliding opening transition between images filed in a row.
Fig 2: “Image Accordion” animation gif by Rey Wang (2012).

In conclusion, CSS animation is a fantastic way to implement basic to complex animations on a website without the use of javascript. They allow you to produce a large range of possibilities for dynamic transformations by having as many intermediate keyframes. However, it’s important to be cautious of maintaining a lean code and not overwhelming the user with an abundance of animations.

Written by Maya Bond-Webster and Kathrine Scott

Bibliography

Mozilla (2022) Using CSS animations. Available from: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

Mozilla (2022) Using CSS transitions. Available from: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Osman, M. (2021) The Main Difference Between CSS Animations & Transitions. Available from: https://blog.hubspot.com/website/css-transition-vs-animation

Sanjuxdr (2020) Difference between animation and transition in CSS. Available from: https://www.geeksforgeeks.org/difference-between-animation-and-transition-in-css/

Scott, K. (2021) Basic Animations. Available from: https://kpsdesign.uk/typesetting-project/basic-animations.html 

VisCircle (2021) The advantages and disadvantages of different animation technologies. Available from: https://viscircle.de/the-advantages-and-disadvantages-of-different-animation-technologies/?lang=en

Wang, R. (2012) Image Accordion with CSS3. Available from: https://tympanus.net/codrops/2012/06/06/image-accordion-with-css3/

Leave a Reply

Your email address will not be published.