CSS Course Hindi - Beginner to Pro ( 2023 ) | Chapter 6

Notes

Transition

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately
transition-property - Specifies the name or names of the CSS properties to which transitions should be applied
transition-duration - duration over which transitions should occur.
transition-timing-function - Timing functions determine how intermediate values of the transition are calculated
transition-delay - Defines how long to wait between the time a property is changed and the transition actually begins.
Shorthand - transition: <property> <duration> <timing-function> <delay>;
 
 
 

Transfrom

transformCSS property lets you rotate, scale, skew, or translate an element.

Translate

Property used for moving element on coordinates
transform:translateX(50px); - If you want to move element on X Axis using TranslateX
transform:translateY(50px); - If you want to move element on Y Axis using TranslateY
transform:translateZ(50px); - If you want to move element on Z Axis using TranslateZ
Shorthand for transform - transform:translate(X,Y) for 2D
transform:translate3D(X,Y,Z) for 3D
New Syntax -
 

Rotate

Property used for rotating element on coordinates.
Rotation units - deg or turn
deg - 0 to 360
turn - 0 to 1 → ∞
transform:rotateX(50px); - If you want to rotate element on X Axis using RotateZ
transform:rotateY(50px); - If you want to rotate element on Y Axis using RotateY
transform:rotateZ(50px); - If you want to rotate element on Z Axis using RotateZ
rotate3d(1, 2, 3, 10deg) - for controlling all direction
 
New Syntax -
 

Scale

Property used for controlling element size .
 
 
New Syntax -
 
 

Skew

Property used for twisting element .
 
 
 
 
 

CSS Animation

Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.
 
keyframe animationName {
from {
translate: -100px;
}
to{
translate:0px;
}
}
keyframe are the setup of animation
From means starting position of animation
To means ending position of animation
We can also use percentage values from 0% to 100%
where 0% is starting position of animation
where 100% is ending position of animation
 
animation-name - Specifies the name of the @keyframes at-rule describing an animation's keyframes.
animation-duration - Specifies the length of time in which an animation completes one cycle.
animation-timing-function - Specifies how an animation transitions through keyframes by establishing acceleration curves.
animation-delay - Specifies the delay between an element loading and the start of an animation sequence.
animation-iteration-count - Specifies the number of times an animation should repeat.
animation-direction - animation's first iteration should be forward or backward
 
 
 

Exercises

 
 
Problem 3 -
 
 
assets