Animation

Sintaxe

MDN

Value: <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

Valores
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
 
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
 
/* @keyframes duration | name */
animation: 3s slidein;
Valores
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
 
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
 
/* @keyframes duration | name */
animation: 3s slidein;

Spinner

spinner
/codes/css/animation/spinner/index.html
<div class="spinner"></div>
/codes/css/animation/spinner/index.html
<div class="spinner"></div>
/codes/css/animation/spinner/css/style.css
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
.spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-right-color: #000;
  animation: spinner 1s linear infinite;
}
 
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
/codes/css/animation/spinner/css/style.css
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
.spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-right-color: #000;
  animation: spinner 1s linear infinite;
}
 
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

Bounce

bounce
/codes/css/animation/bounce/index.html
<h1 class="bounce">Lorem ipsum</h1>
/codes/css/animation/bounce/index.html
<h1 class="bounce">Lorem ipsum</h1>
/codes/css/animation/bounce/css/style.css
body {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
  40% {
    transform: translateY(-100px);
    animation-timing-function: ease-out;
  }
  70% {
    transform: translateY(-50px);
    animation-timing-function: ease-out;
  }
  90% {
    transform: translateY(-50px);
  }
}
 
.bounce {
  animation-name: bounce;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}
/codes/css/animation/bounce/css/style.css
body {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
  40% {
    transform: translateY(-100px);
    animation-timing-function: ease-out;
  }
  70% {
    transform: translateY(-50px);
    animation-timing-function: ease-out;
  }
  90% {
    transform: translateY(-50px);
  }
}
 
.bounce {
  animation-name: bounce;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

Animete CSS

animate-css
/codes/css/animation/animate-css/index.html
<h1 class="wow bounceInRight">Lorem ipsum</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
  new WOW().init();
</script>
/codes/css/animation/animate-css/index.html
<h1 class="wow bounceInRight">Lorem ipsum</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
  new WOW().init();
</script>

Referências

Editar esta página