So in our last learning, we have become comfortable with basic styling through CSS, now it’s time to move ahead with it through transition and animation in CSS.
So what are Transitions (in CSS)?
CSS transitions allow us to change the property values of an element smoothly, over time.
For example, if you change the colour of an element from black to red, usually the change is instantaneous, But with CSS transitions, it occurs at a given pace within a given time.
How To Transition?
For transitions, We need a property that is to be transitioned, it can be anything like height, width, etc.
But let’s see some cool transforms effects beforehand…
Transform()
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc.
Some commonly used transformations are :
- translateX(x)/translateY(y) – translates the element on X and Y axis
- scaleX(x)/scaleY(y) – scales the element along X and Y axis
- rotateX(x)/rotateY(y) – rotates the element along X and Y axis
Examples :
P.S: Notice here, that we have used translate() instead of translateX() and translateY(), the former is a short form of the later
Now that we know some transformations, now let’s hop on into making them transitioned…
Properties Required for Transitions :
Some common transitions property are :
- transition-duration – defines the duration in which the transition will happen
- transition-property – defines the property to be transitioned
- transition-timing-function – defines the timing nature of the transition
- Transition-delay – defines the delay in transition
Let’s see all of these with the help of an example…
P.S: Here we have used the ‘linear’ timing function which keeps a constant flow of the transition, we could have also used
‘ease-in’ – slow in the start
‘ease-out’ – slow at the end
‘ease-in-out’ – slow at start and end
And plenty of other options…
Transitions look cool, but they need to be triggered and can only be used for point A to point B scenarios, for better visuals we need to look at CSS animations.
Now let’s move on to animations…
—————————————————————
Animations in CSS
CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations have keyframes that define the start end and intermediate steps of the animation.
How to Animate?
Like transitions, animations also require some sets of style which define the animation along with keyframes.
animation property can be used to set all the styles for animations.
Properties that come under animation are :
- animation-name – gives the name to the animation, through which keyframes are defined.
- animation-duration – sets the duration of the animation
- animation-timing-function – defines the behaviour of animation over time
- animation-iteration-count – sets the count of cycles of the animation
- animation-delay – sets the delay after which animation starts
Keyframes
Now that we have our styles and the time of our animation, it’s time to set/define the frames of the animation using @keyframes at-rule.
Let’s see how we do that with an example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animations</title>
<style>
#box1{
height: 200px;
width: 200px;
margin: 100px;
background-color: blue;
animation-name: move-circle;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
/* name here after @keyframes needs to be same as animation-name's value above */
@keyframes move-circle {
0%{
background-color: aquamarine;
transform: rotate(0deg);
}
25%{
background-color: blueviolet;
transform: rotate(90deg);
}
50%{
background-color: cadetblue;
transform: rotate(180deg);
}
75%{
background-color: tomato;
transform: rotate(270deg);
}
100%{
background-color: coral;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
</html>Output
So that’s how you can create a simple yet interesting animation in CSS.
And Yes I know that it is a lot of work to create a simple animation that’s why I have a shortcut for you guys
Animate.style is one such library where you can get some really cool and interesting animations without actually creating them…
All the instructions on how to use this are given on the site itself, do give this a read once!
If you’re a beginner and have landed directly on this page, then we would recommend you to first go through our 1st article on web development, to start from the basics: https://www.meusec.com/dev/web-development-1/
Sometimes we include links to online retail stores and/or online campaigns. If you click on one and make a purchase we may receive a small commission.
Comments: