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 - 
/* Keyword values */
translate: none;

/* Single values */
translate: 100px;
translate: 50%;

/* Two values */
translate: 100px 200px;
translate: 50% 105px;

/* Three values */
translate: 50% 105px 5rem;
 

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 - 

/* Single values */
rotate: 50deg;
rotate:0.5turn;

/* Coordinates  values */
rotate: x 50deg;
rotate: y 50deg;
rotate: z 50deg

/* Three values */
rotate: 1 1 1 45deg;
 

Scale

Property used for controlling element size .
 
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
 
New Syntax - 
/* Keyword values */
scale: none;

/* Single values */
/* values of more than 1 or 100% make the element grow */
scale: 2;
/* values of less than 1 or 100% make the element shrink */
scale: 50%;

/* Two values */
scale: 2 0.5;

/* Three values */
scale: 200% 50% 200%;
 
 

Skew

Property used for twisting element .
 
transform: skew(10deg);
transform: skewX(10deg);
transform: scaleY(20deg);
 
 
 
 

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
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">

<path fill="#e7008a" fill-opacity="1" d="M0,224L0,192L72,192L72,64L144,64L144,288L216,288L216,128L288,128L288,320L360,320L360,64L432,64L432,32L504,32L504,160L576,160L576,64L648,64L648,96L720,96L720,256L792,256L792,96L864,96L864,128L936,128L936,96L1008,96L1008,224L1080,224L1080,96L1152,96L1152,128L1224,128L1224,224L1296,224L1296,160L1368,160L1368,224L1440,224L1440,320L1368,320L1368,320L1296,320L1296,320L1224,320L1224,320L1152,320L1152,320L1080,320L1080,320L1008,320L1008,320L936,320L936,320L864,320L864,320L792,320L792,320L720,320L720,320L648,320L648,320L576,320L576,320L504,320L504,320L432,320L432,320L360,320L360,320L288,320L288,320L216,320L216,320L144,320L144,320L72,320L72,320L0,320L0,320Z"></path>

</svg>