CSS Functions, Variables, transitions and animations

Lecture 27 :- CSS Functions, Variables, transitions and animations

Let's explore CSS functions, variables, transitions, and animations in more detail:

CSS Functions: CSS functions are built-in functions that allow you to manipulate values and apply dynamic styles to elements. Some common CSS functions include:

• rgba(): Creates a color using red, green, blue, and alpha (opacity) values.
• calc(): Performs calculations to determine a value, such as width or height.
• var(): Allows the use of CSS variables to store and reuse values.

CSS Variables (Custom Properties): CSS variables, also known as custom properties, allow you to store and reuse values throughout your CSS. They make it easier to maintain and change styles across your website.

Example:

CSS Transitions: CSS transitions allow you to smoothly animate changes to CSS properties over a specified duration and with a specific timing function.

Example:

CSS Animations: CSS animations allow you to create more complex and customized animations by defining keyframes and their respective styles.

Example:

By using CSS functions, variables, transitions, and animations, you can create dynamic and visually appealing web experiences. They enhance the interactivity and user engagement of your website, making it more enjoyable for users to navigate and interact with content. As you continue to experiment and integrate these techniques into your web development projects, you'll have the tools to create more sophisticated and immersive user interfaces.

cssCopy code

@keyframes slide-in {    0% {        transform: translateX(-100%);    }    100% {        transform: translateX(0);    } } .box {    animation: slide-in 1s ease; /* Element slides in from the left over 1 second */ }

cssCopy code

.box {    background-color: blue;    transition: background-color 0.3s ease; /* Transition background color over 0.3 seconds with ease-in-out timing */ } .box:hover {    background-color: red; /* Background color changes to red on hover */ }

cssCopy code

/* Declaring a CSS variable */ :root {    --primary-color: #007bff; } /* Using the CSS variable */ .element {    color: var(--primary-color); /* Use the variable for color */ }