CSS Transitions and Animations are important elements in modern website development. By using the right CSS animation techniques, we can create more interactive websites and provide an impressive user experience (UX). In this article, we will gain a comprehensive understanding of Transitions and Animations in CSS.

What are CSS Transitions and Animations?

CSS Transitions and Animations in CSS are two powerful features that allow us to create smooth movements and visual changes in HTML elements. Transition is used to create smooth changes over a specific period of time. Without transition, styling changes typically occur instantly and abruptly, making the visual appearance less appealing and elegant to look at. Meanwhile, animation provides full control over the keyframes and timing of movements on HTML elements.

Characteristics of CSS Transitions and Animations

CSS Transitions

Requires a trigger

Transitions only occur when there is user action, such as with pseudo-classes like :hover or :focus.

Change from State A to State B

An example of a state change is when the background color changes from blue to red when the element is clicked or hovered over by the user.

Simple and Lightweight

Ideal for simple effects such as changes in color, size, or transparency (opacity) of an element.

CSS Animation

No Trigger Required

Animations can run automatically even when the page is first loaded and do not require user interaction.

Uses Keyframes

We can set several points of change with keyframes.

More Complex and Flexible

Can be used to create dynamic motion effects such as loading spinners, moving icons, or even website intros.

Read Also Related Articles CSS Pseudo-Class

Learn CSS Pseudo-Classes Definition, Examples, and How to Use Them

Reasons Why CSS Transitions and Animations Are Important

Nowadays, user experience (UX) and user interface (UI) are important factors that determine the success of a website. One effective way to improve both is by using CSS transitions and animations. Here are the reasons why CSS transitions and animations are so important when developing a modern website.

Enhancing User Experience

Transition and animation effects on elements create an interactive feel for visitors. For example, when a user hovers over a button, the smooth color change makes the interface feel more responsive and engaging.

Making the Interface Feel More Responsive

User interaction with the system feels smoother and more responsive. This creates a professional impression and enhances comfort while navigating the site.

Attracting User Attention

CSS Animation can be used to highlight important content, such as Call-to-Action (CTA) buttons, notifications, or promotional elements.

Assisting Navigation and Visual Focus

Not only for aesthetics, but CSS Transition and Animation can also be used to guide visitors' eyes in the desired direction.

Implementation of CSS Transitions and Animations

CSS Transition

<!DOCTYPE html>
<html>
	<head>
    <title>Learn CSS Transition and Animation - NganggurDev</title>
		<style>
			.container {
			 width: 100%;
       height: 400px;
			 display: flex;
			 justify-content: center;
			}
			
			.my-button {
				width: 120px;
				height: fit-content;
				padding: 10px;
				background-color: blue;
				color: white;
				transition: background-color 0.3s ease;
			}

			.my-button:hover {
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<button class="my-button">Click Me!</button>
		</div>
	</body>
</html>

In the code example above, when the cursor is pointed at the button, the color of the button will smoothly change from blue to green over 0.3 seconds.

Some commonly used Transition properties:

transition-property
transition-duration
transition-timing-function
transition-delay

CSS Animation

<!DOCTYPE html>
<html>
	<head>
    <title>Learn CSS Transition and Animation - NganggurDev</title>
		<style>
			.container {
			 width: 100%;
       height: 400px;
			 display: flex;
			 justify-content: center;
			}
			
			.bouncing-circle {
				width: 120px;
				height: 120px;
				margin-top: 80px;
				border-radius: 100%;
				padding: 10px;
				background-color: lightblue;
				color: white;
				animation: bounce 0.8s ease-in-out infinite;
			}

			@keyframes bounce {
				0%, 100% {
					transform: translateY(0);
				}
				30% {
					transform: translateY(-30px);
				}
				50% {
					transform: translateY(0);
				}
				70% {
					transform: translateY(-15px);
				}
				90% {
					transform: translateY(0);
				}
			}

		</style>
	</head>
	<body>
		<div class="container">
			<div class="bouncing-circle"></div>
		</div>
	</body>
</html>

In the code example above, there is a ball colored lightblue that will perform a bouncing animation repeatedly.

Some Animation properties you need to know:

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

Conclusion

Transition and Animation in CSS are powerful features that can enrich the appearance and make websites more interactive, attractive, and professional. By understanding how they work and using them appropriately, we can build websites with a better user experience.

Thank you, see you in the next article.