Use of CSS properties when creating a website in HTML can organize the style of your website and add your own personal touch. A creative way to stylize a website is to take advantage of the animation property. CSS Animations allow the creator to implement animations on their website without use of javascript. The advantage of these animations is that it will run well on most system loads, and when the browser controls the animation it allows the browser to optimize performance and efficiency.
When creating an animation in CSS, there are two things you need to consider. First is the style describing the animation, which is responsible for configuring timing, duration, and how the animation sequence should progress. And the second is the set of keyframes that configures the actual appearance of the animation and indicates where the start and end states of the animation is.
To get started, the element that will be animated should have these sub-properties: “animation-duration”, “animation-timing-function”, and “animation-name”. If the animation-duration property is not specified the animation does not occur. Once this is done, the appearance of the animation is configured by using two or more keyframes using “@keyframes”. Keyframes use a <percentage> to indicate the time in the animation. For example, “from/0%” is the start and “to/100%” is the end state. To get the animation to work, you also need to bind the animation to an element such as the <p></p> or <div></div> tags.
One way the animation property is useful is to use it to animate something moving across the screen. Video game websites like Nintendo do this to give life to their game characters when promoting a video game. It enhances the user experience, makes the website interactive, and draws viewers in to look at the information.
http://https://codepen.io/mim_101/pen/ZEyZXJd
Additionally, the animation property has a loop feature. This is done easily by adding in the “animation-iteration-count” tag and typing in ‘infinite’ to it. A small element, but makes a huge difference when creating smooth transitions or adding a neat feature. If this was added to the previous animation, something could move across the screen infinitely and loop back around.
Another way the animation property can be implemented is with a delay. The delay is created by using negative values, so the animation will be treated as if it had already been playing for however many seconds its delayed by. This can be used for immediately grabbing attention on a webpage or animating the background. It tends to have a more fluid feel to it since it’s already moving when you open the webpage. And adding an infinite number of plays to it in iteration count would make it feel more alive or natural.
http://https://codepen.io/mim_101/pen/qBjwpvW
A real website example introduced before is Nintendo’s page for the deluxe edition game Pikmin 3 for the Nintendo Switch. The use of the animation is sprinkled throughout adding an exploratory element to the site. The animations are on the pikmin, which are little alien creatures that harness the power of elements such as fire, water, rock, and electricity. The pikmin are hidden throughout the pages and the viewer must find them in order to gain a reward. This creates positive interactivity for the game and displays a preview of how pikmin act and are animated. The yellow pikmin runs across the screen and loops back where it started, just how it was described before. And the red pikmin is hiding behind a bush where the leaves are the animated element. Although it seems complicated, animations can be used as a simple way to spice up a website and create a lively scene.
CSS Animations. CSS animations. (n.d.). Retrieved October 2, 2021, from https://www.w3schools.com/css/css3_animations.asp.
Using CSS animations – CSS: Cascading style sheets: MDN. CSS: Cascading Style Sheets | MDN. (n.d.). Retrieved October 2, 2021, from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations.