ADVANCED
CSS
CSS
LAYOUT
Objective
- Learn the normal flow
- Learn Positioning
- Learn float
- Learn flex
- Learn about grid
How to position your elements?
1. CSS Position
-
position : absolute
-
position : relative
-
position : fixed
-
position : sticky
How to use float ?
2. CSS float
-
float : left
-
float : righ
How to Display your elements?
3. CSS Display
display : block
display : none
How to use flex Display ?
4. CSS Flex box
display : Flex
How to use grid Display ?
4. CSS Grid display
display : GRID
CSS
ANIMATION
What is ANIMATION ?
An act or instance of animating or enlivening. the state or condition of being animated.
Objective
- Learn Transitions
- Learn Animations
-
transition-property
- transition-duration
-
transition-timing-function
-
transition-delay
-
transition
1. CSS Transitions
div{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}div{
transition: width 2s linear 1s;
}2. CSS ANIMATION
- @keyframes ( from - to )
- @keyframes ( 0% - 100% )
2. CSS ANIMATION
@keyframes blind {
from {background-color: red;}
to {background-color: yellow;}
}@keyframes blind {
0% {background-color: red;}
100% {background-color: yellow;}
}- animation-name
- animation-duration
- animation-delay
- animation-iteration-count
- animation-direction
- animation-timing-function
- animation-fill-mode
2. CSS ANIMATION
div{
animation-name:blind;
animation-duration:1s;
animation-delay:1s;
animation-iteration-count:3;
animation-direction:normal;
animation-timing-function:ease;
}