Ecco tutti i blocchi di codice presentati nella terza lezione del corso "Landing page animate con i CSS" https://skillsandmore.org/corso/landing-page-animate-con-i-css/

1-definizione-base-keyframes.css

@keyframes change-background{
  from{
    background-color: #fff;
  }
  
  to{
    background-color: #000;
  }
}

10-diverse-dichiarazioni-animation.css

.box{
  animation: change-background 3s;
  animation: change-background 3s ease-in;
  animation: change-background 3s forwards;
  animation: change-background 5s ease-in-out 2s backwards;
  animation: 3s linear 5s backwards infinite alternate change-background;
  background-color: #FBC02D;
  border-radius: 10px;
}

2-definizione-keyframes-percentuali.css

@keyframes change-background{
  0%{
    background-color: #FF0400;
  }
  
  50%{
    background-color: #4CAF50;
  }
  
  100%{
    background-color: #1600EE;
  }
}

3-uso-animation-name.css

.box{
  ...

  animation-name: change-background;
}

4-uso-animation-duration.css

.box{
  ...

  animation-duration: 600ms;
}

5-use-animation-timing-function.css

.box{
  ...

  animation-timing-function: ease-in-out;
}

6-use-animation-delay.css

.box{
  ...

  animation-delay: 450ms;
}

7-use-animation-iteration-count.css

.box{
  ...

  animation-iteration-count: 0.5;
}

8-use-animation-direction.css

.box{
  ...

  animation-direction: reverse;
}

9-definizione-animation.css

.box{
  animation: 
    animation-name
    animation-duration
    animation-timing-function
    animation-delay
    animation-iteration-count
    animation-direction
    animation-fill-mode
    animation-play-state
}