Content Management: Seminar Article
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
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.
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.
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|
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|
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|
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.
Written by Maya Bond-Webster and Kathrine Scott
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/