What is Keyframe Animations?

A keyframe animation is like snapshot of how an element should like certain point in an animation, By combining multiple keyframes, CSS smoothly transitions between those states, Keyframe animation is used to move element,change colors adjust opacity

 /* Creating Animation */
@keyframes fadeIn {
from {
 opacity: 0;
}
to {
   opacity: 1;
 }
}

/* Applying Animation */
.some-property {
 animation : fadeIn 1s infinite ease-in-out;
}

Transform function

The transform function in CSS allows you to apply 2D or 3D transformations to an element. This can include translations, rotations, scaling, and skewing. Transformations can be animated using CSS transitions or keyframe animations.

/* Applying Transformations */
.some-element {
  transform: translateX(100px) rotate(45deg) scale(1.5);
  transition: transform 0.5s ease-in-out;
}

Translations : We can translate the element along X, Y, and Z axis using the following functions:

• translateX(value) : Moves element along X-axis
• translateY(value) : Moves element along Y-axis
• translateZ(value) : Moves element along Z-axis (3D) Translate ridculously powerful something unique in CSS language
• When we use percentage value, percentage refers to the element's own dimensions.

.some-element {
  transform: translateX(50%); /* Moves element right by 50% of its own width */
}

CSS Variables

using CSS variable there is an lot advantage, It helps to reuse the value multiple time in the css file, It also helps to manage the theme color in the website

:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
  --animation-duration: 1s;
}      

• Inheirtance
• Accessing CSS through JavaScript

Inheirtance Inheirtance is one of the powerful feature of CSS variable, When we define the variable in the root scope it will be accessible throughout the document

:root {
 --main-color: #3498db;
}
.header {
  background-color: var(--main-color);
}
.footer {
 color: var(--main-color);
}

Accessing CSS through JavaScript

You can access and modify CSS variables using JavaScript, Which allows dynamic theming and styling of web pages

// Accessing CSS variable
const rootStyles = getComputedStyle(document.documentElement);
const mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor); // Outputs: #3498db
// Modifying CSS variable
document.documentElement.style.setProperty('--main-color', '#e74c3c');