Transitions and Animations
Duration : 00:02:00
CSS Transitions: Animatable Properties:
CSS transitions allow smooth visual state changes of animatable properties. These properties include color, background color, font size, width, and height, among others. By defining transition rules, elements smoothly transform from one state to another, enhancing the user experience.Example:
/* Transition the color property over 1 second */
.element {
color: blue;
transition: color 1s;
}
/* Transition width and height properties with a delay of 0.5 seconds */
.element {
width: 100px;
height: 100px;
transition: width 1s, height 1s 0.5s;
}
Components of CSS Transitions:
CSS transitions consist of four main components: the property to transition, the duration of the transition, the delay before it starts, and the timing function. Together, these components define how an element's style changes over time during the transition.Example:
/* Transition the opacity property over 2 seconds with a delay of 0.5 seconds and ease-in-out timing function */
.element {
opacity: 0;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 0.5s;
transition-timing-function: ease-in-out;
}
Default Value for Transition Duration:
When no explicit duration is provided for a CSS transition, the default value is 0s. This means there is no animation, and the change between the initial and final state of the element is instantaneous.Example:
/* The border property will change instantly with no animation */
.element {
border: 1px solid black;
transition-property: border;
/* No transition duration specified, so it defaults to 0s */
}
CSS Transition Timing Function:
The transition-timing function property defines the acceleration of a CSS transition over its duration. Various timing functions like ease-in, ease-out, ease-in-out, and linear can be used to control the speed of the animation.Example:
/* Transition the width property over 1 second with a linear timing function */
.element {
width: 100px;
transition: width 1s linear;
}
CSS Transition Delay:
The transition-delay property specifies a pause before the transition starts. This allows for fine-tuning the timing of the animation.Example:
/* Delay the transition of background color by 0.5 seconds */
.element {
background-color: red;
transition: background-color 1s 0.5s;
}
Transitioning Multiple Properties with Comma:
Multiple CSS properties can be transitioned together in a single transition rule by separating them with commas. This enables synchronized animations of different properties.Example:
/* Transition both width and height properties over 1 second */
.element {
width: 100px;
height: 100px;
transition: width 1s, height 1s;
}
Transitioning All Properties with 'all':
The value 'all' for transition-property allows all animatable properties to transition at once. This is a convenient shorthand for applying transitions to all properties that change.Example:
/* Transition all properties over 2 seconds */
.element {
color: blue;
width: 100px;
transition: all 2s;
}
CSS Transition Shorthand Syntax:
The transition CSS property provides a shorthand syntax for defining multiple transition-related properties in a single declaration. It includes transition-property, transition-duration, transition-timing-function, and transition-delay.Example:
/* Shorthand syntax to transition color and font-size over 1 second with a delay of 0.5 seconds */
.element {
color: blue;
font-size: 16px;
transition: color 1s, font-size 1s 0.5s;
}
@keyframes:
Defines a set of animation stages or keyframes for CSS animations.Example:
@keyframes slide-in {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
animation-name:
Specifies the name of the keyframes animation to be applied to an element.Example:
.element {
animation-name: slide-in;
}
animation-duration:
Sets the duration in seconds or milliseconds for one cycle of the animation.Example:
.element {
animation-duration: 2s;
}
animation-delay:
Defines the delay before the animation starts, in seconds or milliseconds.Example:
.element {
animation-delay: 1s;
}
animation-iteration-count:
Specifies how many times the animation should repeat (e.g., once, infinite, or a specific number).Example:
.element {
animation-iteration-count: 3;
}
animation-direction:
Determines whether the animation plays forwards, backwards, alternates, or cycles.Example:
.element {
animation-direction: alternate;
}
animation-timing-function:
Sets the timing function that controls the pace of the animation (e.g., linear, ease-in, ease-out).Example:
.element {
animation-timing-function: ease-in-out;
}
animation-fill-mode:
Defines how the element should behave before and after the animation (e.g., maintaining the final state).Example:
.element {
animation-fill-mode: forwards;
}
animation:
A shorthand property to set all animation properties in one declaration.Example:
.element {
animation: slide-in 2s ease-in-out 1s infinite alternate;
}Still have some questions? Let's discuss.
CONTACT US