Introduction
Many people surf the internet for several reasons, but sometimes they unconsciously get attracted to the display, graphics and user experience they find on the web. This explains that beauty has a role to play in getting users attracted to a website. I describe this as “aesthetics on the web”. The use of smashing graphics and animations takes resources from the server, hence the need for a new code of making designs less heavy yet interactive and usable has become Paramount. CSS is now gradually replacing online vector designs and animations, and has become a useful tool in creating light weight designs with aesthetic value. I know this might sound controversial but let me take you down the road, show you a simple illustration on creating vector graphics and animation using CSS keyframes. This is not an absolute beginner course but you can catch up by referring to CSS in the w3schools and then follow through on this interesting idea of replacing vector graphics using CSS3 and keyframe animations.
What is CSS?
The acronym CSS stands for Cascading Style Sheets. CSS styles the display of HTML elements on screen, paper, or in other media like the browser.
CSS creates meaning to HTML and allows users to easily interact with its elements, it controls the layout of multiple web pages seamlessly. CSS can be stored as external stylesheets or inline with HTML tags.
What is Aesthetics?
The idea of Aesthetics, which can not be over emphasized, is generally associated to beauty, appreciation and taste of beauty.
CSS Keyframes
The word keyframes in relation to CSS and its syntax is at least familiar to a lot of developers. The CSS3 module explains the basic syntax, properties, values and all other requirements for CSS keyframes. For some years now, keyframes in CSS has continued to develop and has the prospective of becoming a huge part of the web.
The keyframes object represents animation codes in the timeline of events in an animation, which changes gradually from one set of CSS styles to another in a progressive order. Developers can use CSS3 keyframe animations to create smooth and maintainable animations that do not require tonnes of codes. To begin with CSS3 keyframes, you can refer to CSS3 Module. Keyframes in CSS begins with the @ symbol, denoted as “@keyframe”; What follows is what is known as an identifier — a name that is chosen by the developer to recognise the keyframe responsible for a particular animation, i.e “@keyframe [animationname]” with no space between names. The identifier is referenced in other parts of the CSS to carry out behaviours according to a set of rules declared in the the CSS. Before diving into my code lab during which I will show you a practical example of how I animated a Record Player using CSS3 keyframes, as well as further explanations on CSS3 modules. The concept of creating designs with CSS3 and applying keyframes to turn them into animations is completely awesome. It adds life to web UI with other values associated with it. let’s take a look at its aesthetic values.
CSS3 Keyframe Animation as an Aesthetic tool
The idea of gamifying user interfaces is a new edge form of getting users to stay on your site and even pay return visits. Think about playing a game — losing and making another try. We simply do not want to lose when we are playing games, therefore we keep trying. CSS keyframe can be used in creating such an engagement, with assets solely developed with CSS for user interfaces (UI). Frontend designers in recent times have combined the idea of creating vectors with pure CSS and using keyframes as a tool to create animations that further enhances the the aesthetic value of a website. Keyframes direct the behaviour of an object from one position to another, depending on what the frontend developer intends to achieve, he can play with the code to create interesting animations that enhances aesthetic value on the web.
The purpose of this article, which is not a full discussion on CSS3 keyframes, is to give you an overview of how it works. It will make less emphasis on creating vector graphics with CSS.
CSS3 KEYFRAME CODE LAB
Animating a Recorder Using CSS Keyframes
This vector graphic is created with CSS from the scratch, take your time to study the codes used in creating every element of the design.
Let’s get into a more practical explanation on the steps I took in creating the record player animation.
CSS Syntax
@keyframes animationname {keyframes-selector {css-styles;}}
In this syntax, animationname is an indentifier that will be used to refer to this animation.
@keyframes rotateDisc {keyframes-selector {css-styles;}}
Instead of using aniamtionname, let’s change the identifier to rotateDisc because it will be used to refer to the spin that takes place on mouse over the recorder.
Property Values
Value: animationname
Description: Identifier or name used in defining the animation.
Value: keyframes-selector
Description: The percentage requirements for the animation. Value: 0-100% from (same as 0%) to (same as 100%) Note: You can choose to use any keyframes-selectors in a particular animation.
Value: css-styles
Description: The standard properties of CSS style sheet follows the selector.
Syntax Interpretation
animation: rotateDisc 200ms infinite linear;
}
/* Animation name syntax */
@keyframes rotateDisc {
/* Keyframe selector (from-to) and CSS styles */
from {transform: rotate(0deg);transform-origin: 49% 177%; }
to {transform: rotate(359deg);transform-origin: 49% 177%; }
}
Properties
These defines the entire behaviour of a keyframe animation.
Value: animation
Description:The animation CSS property is a shorthand property used in interpreting the different animation properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.
Value: animation-delay
Description: The animation-delay CSS property defines exactly when an animation starts. You may choose to begin an animation at a future point in time, immediately and from its beginning, or immediately and partway through the animation cycle.
Example:
/* Single animation */
animation-delay: 2s;
animation-delay: 0s;
animation-delay: -2300ms;
/* Multiple animations */
animation-delay: 3.1s, 350ms;
Value: animation-direction
Description: The animation-direction CSS property defines the condition of an animation if it should play forwards, backwards, or alternating back and forth.
Example:
/* Single animation */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;
Value: animation-duration
Description: The animation-duration CSS property defines the length of time it take to complete an animation cycle.
Example:
/* Single animation */
animation-duration: 4s;
animation-duration: 140ms;
/* Multiple animations */
animation-duration: 1.44s, 14.32s;
animation-duration: 12s, 36s, 240ms;
Value: animation-fill-mode
Description: The animation-fill-mode CSS property defines how a CSS animation should apply styles to its target before and after its execution, should it move forward on mouseover? Or backwards? Or both ways? These are defined by the fill-mode.
Example:
/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
Value: animation-iteration-count
Description: The animation-iteration-count CSS property defines the number of times an animation cycle should be played before it stops. In the case where multiple values are specified, each time the animation is played, the next value in the list is used, and will cycle back to the first value after the last one is used and completed.
Example:
animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.5;
animation-iteration-count: 2, 0, infinite;
Value: animation-name
Description: The animation-name CSS property defines one or more animations identified by its name. It is applied to an element. Each name indicates an @keyframes and the at-rule defines the property values for the animation sequence.
Example:
/* Single animation */
animation-name: none;
animation-name: rotateDisc;
Animation-name: spin;
/* Multiple animations */
animation-name: rotateDisc, spin;
/* Global values */
animation-name: initial
animation-name: inherit
animation-name: unset
Value: animation-play-state
Description: The animation-play-state CSS property defines whether an animation is running or paused. In JavaScript, this state can be queried to specify whether or not the animation is currently running. You can also pause or resume playback of an animation using Javascript.
Example:
/* Single animation */
animation-play-state: running;
animation-play-state: paused;
/* Multiple animations */
animation-play-state: paused, running, running;
/* Global values */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: unset;
Value: animation-timing-function
Description: The animation-timing-function CSS property defines the progress of a CSS animation whether it should move in slow or fast or slow over the duration of each cycle.
Example:
/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: frames(10);
/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;
Browser compatibility
When using @keyframes remember to prefix your syntax to enable cross-browser support, for example:
Prefix: -webkit-
Description (browser): Supported by Google Chrome, Safari, Opera
Prefix: -ms-
Description (browser): Supported by Edge / Internet Explorer
Prefix: -moz-
Description (browser): Supported by Firefox
The syntax: animation: rotateDisc 200ms infinite linear; can be interpreted as;
animation-name: rotateDisc
animation-duration: 200ms
animation-iteration-count: infinite
animation-timing-function: linear
Instead of stating each property in full, the short hand method can be used to reduce the number of codes.
Example: animation: rotateDisc 200ms infinite linear;
Which is the same thing as:
animation-name: rotateDisc
animation-duration: 200ms
animation-iteration-count: infinite
animation-timing-function: linear
Project HTML
<div class=”wrapDisc”>
<div class=”recordsPlayer”></div>
<div class=”wrapDiscShadow”></div>
<div class=”recordsPlayernuts”></div>
<div class=”volumeleft”></div>
<div class=”volumeright”></div>
<div class=”tonearm”></div>
<div class=”warpTopandDownSpin”>
<div class=”topSpin”></div>
<div class=”bottomSpin”></div>
</div>
</div>
I mentioned earlier that this animation is built using pure HTML and CSS and no SVG or Images are involved. Feel free to explore the CSS rules for each class selector to see the relationship between the codes. Bear in mind that we are dealing with CSS keyframes and in this example the following classes are animated using keyframes:
HTML
<div class=”topSpin”></div>
<div class=”bottomSpin”></div>
CSS
/* tonearm control */
.tonearm {
width: 7px;
height: 140px;
position: relative;
background-color: #252525;
border-radius: 50px;
top: 79px;
left: 380px;
z-index: 5;
transform: rotate(0deg);
transform-origin: 50% 0%;
transition: all 500ms ease-out;
}
.wrapDisc:hover .tonearm {
transform: rotate(38deg);
left: 374px;
}
Conclusion
Using CSS Keyframes is an integral part of adding interactions to web user interfaces, it creates a whole new experience and adds a more gamified feel to the aesthetic value of a web page. I actually encourage designers to create vectors with CSS as much as they can when working with keyframe animations. You can follow up for questions, comments on my social media handles below.
