CSS Animations
Introduction to css animations and transitions
Have you ever wondered about how animations on websites actually work ? Do you wish to design a similarly elegant and interactive website for your business too?
If yes, then look no further.
In this article I’ll try to cover the basics of CSS animations to make you comfortable with creating your own CSS animations from scratch!
So, why animate?
To improve usability and general user experience, as animations assist in providing improved visual feedback and helps in making interactions with the website striking. But that doesn’t mean animation should be everywhere in your sites. There’s a time and a place for them to avoid ending up creating a page that is more distracting than interactive.
CSS animations have 3 significant aspects to it:
- Transform
- Transition
- Keyframes
A) TRANSFORM:
Transform helps to change your web elements in all kinds of ways, from moving the element to re-sizing it, from rotating the element to tilting it.
There are four significant aspects of transforms:
- Translate
- Scale
- Rotate
- Skew
Let’s undertand each one of them.
1. Translate
Translate changes the coordinates of the element. It is used to change the appearance of the component on a 2D plane.
Translate means to simply move the element from one position to another on the webpage. You can translate an object on X-axis, Y-axis or both.
transform: translateX(100px);
// Moves the element on the X-axis
transform: translateY(100px);
// Moves the element on the Y-axis
transform: translate(100px, 100px);
// Moves the element on the X-axis and Y-axis respectively
transform: translate(100px);
// Moves the element on the X-axis ONLY
2. Scale
Scale can change the size of the image, along with both the X-axis and Y-axis. Scaling distorts the shape of the element and can degrade the quality of the element. A number greater than 1 will increase the size and a decimal less than 1 will decrease the size.
transform: scaleX(3);
// Scaling along the X-axis
transform: scaleY(0.5);
// Scaling along the Y-axis
transform: scale(3 , 0.5);
transform: scale(3);
// Scaling along both the X-axis and Y-axis
3. Rotate
You can rotate the element either clockwise or counter-clockwise. The unit of measurement used is degrees. A positive value will rotate the element clockwise, and vice versa for the negative element. This rotation would also happen along X, Y and Z axis.
transform: rotateX(45deg);
// The elements will be rotating into the page along X-axis.
transform: rotateY(45deg);
// The elements will be rotating into the page along Y-axis.
transform: rotateZ(45deg)
// The elements will be rotating into the page along Z-axis.
4. Skew
Skewing an element means tilting the component. It has both positive and negative values, and like rotation, it is measured in degrees (deg) too.
Positive X value bends the element to the left, and vice versa for the negative X. Likewise, a positive Y value dips the element downwards, and vice versa. By default, if X or Y aren’t stated in the transform, it will shift the element with respect to the X-axis.
transform: skewX(45deg); or skew(45deg);
// Along X-axistransform: skewY(80deg);
// Along Y-axis
Combining transforms
You can also apply multiple transforms into a single transform statement. The order does matter as the second transform will apply on the first transform and the third will apply on the result of the first two transforms.
transform: translateX(100px) rotateX(45deg) scaleY(1.5) skewX(45deg)Adding transforms to events
All of these transforms can take effect on some user event like hover, click, focus, active, etc.
.element-to-animate:hover {
transform: translateX(100px) rotateX(45deg) scaleY(1.5);
}B) TRANSITION:
Transitions help in making the animation fluid.
You can control the transitions with the help of the following properties:
- Transition-property
2. Transition-duration
3. Transition-timing-function
4. Transition-delay
Let’s undertand each one of them.
1. Transition-property:
These are the CSS properties that one can use transitions on. This ranges from playing with margins and paddings to background and borders. You can either apply a transition to a specific feature or to a complete list. A complete list of all of these properties can be found here.
transition-property: background-color;
// Applying transition property to a specific CSS property
transition-property: all;
// Applying a transition to the entire list of CSS properties
2. Transition-duration:
The time duration for which the animation will be in play. This can easily be measured in seconds (s) or milliseconds (ms).
transition-duration: 0.5s;3. Transition-timing-function:
Speed is something that can make or break the user experience with your animation; therefore it is advisable to control it by using transition-timing-function.
There is some in-built values for speed, like ease, ease-in, ease-in-out. Try it out.
You also can possess total command over the speed by using Bezier Curves. Try it out.
transition-timing-function: ease;transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
4. Transition-delay:
This helps in creating a pause or delay between the event getting fired that starts the animation and the actual start of the animation. It is measured in seconds (s) or milliseconds (ms).
transition-delay: 0.5s;Combining transitions
transition: (property) (duration) (transition-timing-function) (transition-delay);C) KEYFRAMES:
The keyframes help in changing the animation from one to another at certain times.
You can play with keyframes in two ways:
- From — To approach
- Percentage Approach
1. From-To approach
In this approach, there are only 2 states during the animation — start state and end state.
@keyframes animation_name {
from { }
to { }
}To animate an element (e.g., a Circle) to move horizontally from its initial position:
@keyframes move {
from {
transform: translateX(-200);
}
to {
transform: translateX(1000px);
}
}.circle {
animation-name: move;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: normal;
}
2. Percentage approach
We cannot use from-to in @keyframes as there is more than 1 state now. The percentage approach breaks down the animation into various intermediate states including a start and end state. The start state is indicated by 0%, and the end state is indicated by 100%. There can be as many intermediate states you want, but it is advised to keep the segregation of states uniform throughout.
Example: 0% — 25% — 50% — 75% — 100%
@keyframes jump {
0% { transform: translateY(-50px) }
50% { transform: translateY(-100px) }
100% { transform: translateY(-50px) }
}• Animation shorthand
One can also use this concise format to write the animations:
animation: (animation-name) (animation-duration) (animation-fill-mode) (animation-timing-function) (animation-iteration-count) (animation-direction) (animation-delay);
Note: The animation-delay will always come AFTER animation-duration. Apart from them, time-oriented functions and the order of other properties in shorthand doesn’t matter.
.circle {
animation-name: move;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: normal;
}// Can be re-written as
.circle {
animation: move 3s ease-in infinite normal 2s;
}
We now have two animations — move and jump, which we wish to add on the “circle” element. We can do this through a single line code by using, “Chaining Animations.”
• Chaining Animations?
Playing with multiple animations is a breeze with CSS. Comma separation technique can be used to chain the animation and run one animation after the other.
.circle {
animation: move 3s ease-in infinite normal 2s,
jump 2s ease 4 alternate reverse;
}Classifications of Animation Properties:
animation-name: Name of the animation which is indicated by the keyword after @keyframes
animation-fill-mode: Tells what to do with the element being animated outside the animation window.
animation-iteration-count: It helps to repeat the animation. It can either have a number value or if you want the animation to play continuously, then use “infinite.”
animation-direction: You don’t need to write a separate animation all together just to reverse the animation. You can apply this to play with the current animation, and it’s direction.
animation-timing-function: helps to control the speed with which the animation starts, behaves and ends. There are some in-built values like ease, ease-in and you can write your own using the cubic-bezier(n,n,n,n).
animation-delay: will start the animation few seconds/milliseconds after the event gets fired.
That’s it for today. It could be a bit complicated to get used to CSS animation tricks at first. But once you get used you’ll realize that CSS Animations and Transitions are simply marvelous.
Thanks for reading! Any comments or feedback are more than welcomed 😊
