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

  1. transition-property

  2. transition-duration

  3. transition-timing-function

  4. transition-delay

  5. 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

  1. @keyframes ( from - to )
  2. @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;}
}
  1. animation-name
  2. animation-duration
  3. animation-delay
  4. animation-iteration-count
  5. animation-direction
  6. animation-timing-function
  7. 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;
}

ADVANCED
CSS

ENDED

3. CSS ANIMATION

By Youcef Madadi

Made with Slides.com

3. CSS ANIMATION

  • 230

More from Youcef Madadi