Today I learnt about animations in CSS which is a really fun and interesting topic. Adding animations to our site makes it really pleasant and exciting to watch. There are basically two types of animations:
1.Transition: Transitions are used to create smooth animations between two states of an element thereby increasing user interactivity. It is applied in the following way:
element/selector{
transition: all 3s linear 2s;
}
element:psuedo state{
some property change
}
This animation has 4 attributes mainly
property-name:The property/attribute of the element which needs to be changed.
time-duration The time in which the complete animation should be completed...this can be specified in seconds or milliseconds.
transition-timing-function:It specifies the way in which the transition should take place. There are 4 ways:
1.ease: The transition starts slowly, increases in the middle and ends slowly. This is the default one
2.linear: Same speed from start to end.
3.ease-in: Starts slowly and ends fast.
4.ease-out: Starts fast and ends slowly.
There is another one ease in out which is basically the same as ease.
transition-delay: The wait time before starting the animation.
Next is the animation property which is applied using the keyword @keyframes .We apply it as follows:
element/selector{
animation-name: myanimation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: 3; /*no of times animation should take place*/
animation-direction: alternate;
@keyframes{
from{
initial values of property to be transformed
}
to{
changed values of property to be transformed
}
}
In this type we do not use pseudo class or pseudo states for the effect to take place rather we move or transform the element from one position to another using the keyframes.
Next is the transform type of animation in which we can make an element rotate or scale or translate(move) from the same point or from one point to another. We use pseudo classes for this type.
element: pseudo state {
transform: translate(400px,400px);
transform: rotate(360deg);
transform: scale(3,1);
That's all about animation....see you all in the next post
Top comments (1)
Nice content @asran_2025