ilusao de café sendo derramado em uma xícara☕ 🍫
Tags: css, animation, tutorial, frontend
Published: 2023-04-24 20:35:15

 Te ensino como fazer o café de todos os dias. ☕ 🍫 #css  
![cup animation](https://s11.gifyu.com/images/AnimationCoffee.gif)
##Passo 1: Um contenedor para toda animacao. 
**Html** 
```
<div class="container-animation">
  <div class="container-xicara">
    <div class="chorro"></div>
    <div class="coffee-cont">
      <div class="coffee-cup"></div>
      <div class="coffee-hand"></div>
    </div>
  </div>
</div>
```
**CSS**

```
.container-animation {
  width:40vw;
  height: 100vh;
  margin: auto;
  position: relative;
}
```
##Paso 2: Derramando o cafe 💧
**animation:** nome: "cafe-derramando" e tempo de 4 segundos.
**animation-fill-mode:** forwards, a animação manterá o último estado da animação depois que ela terminar, ou seja, o café derramado permanecerá na xícara após a animação ser concluída.
**animation-timing-function:** devagar e acelera à medida que a animação avança.
**animation-iteration-count:** quantas vezes a animação será executada.
**CSS**
```
.cafe-derramando {
  width: 10%;
  border-radius: 20%;
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translatex(-50%);
  background: #84523f;
  z-index: 1;
  animation: cafe-derramando 4s;
  animation-fill-mode:forwards;
  animation-timing-function: ease-in;
  animation-iteration-count:2;
}
```
##Paso 3: A xicara ☕
Para dar forma à xícara, utilizamos a propriedade **"border-radius**", que permite definir os cantos do elemento. Já para dar profundidade usamos a propriedade **"box-shadow".**
```
.coffee-cup {
  position: relative;
  width: 280px;
  height: 190px;
  margin: 0 auto;
  background: #fff;
  );
  background-image: url("https://iili.io/H8C9muV.png");
  border-radius: 22% 22% 100px 100px;
  top: 50%;
 box-shadow: -30px 61px 42px -40px rgba(0,0,0,0.1);
}
```
##Paso 4 Café
Cria uma forma oval.

```
"".coffee-cup::before {
  content: " ";
  display: block;
  height: 35px;
  width: 240px;
  position: absolute;
  border-radius: 50%;
  background: rgb(171, 104, 80);
  background: linear-gradient(
    3deg,
    rgba(171, 104, 80, 0.9836309523809523) 38%,
    rgba(129, 80, 63, 1) 60%,
    rgba(136, 75, 52, 1) 86%
  );
  top: 10%;
  left: 50%;
  z-index: 9;
  transform-origin: 50%;
  animation: fill 3s;
  animation-fill-mode: both;
  animation-delay: 1.2s; /*solo pasa una vez*/
  transform: translate(-50%, 60%) scale(0);
  animation-iteration-count: infinite;
  animation-iteration-count: 2;
  z-index: 2;
}""
```
##Paso 5 Alça💪

```
"".coffee-cup::after {
  content: "";
  display: block;
  height: 50px;
  width: 275px;
  position: absolute;
  border-radius: 50%;
  background: rgb(180, 139, 127);
  background: linear-gradient(
    90deg,
    rgba(180, 139, 127, 1) 9%,
    rgba(224, 162, 144, 0.9668242296918768) 52%,
    rgba(255, 213, 201, 1) 76%
  );
  top: 9%;
  left: 50%;
  border: 4px solid #c74c29;
  transform: translate(-50%, -40%);
}""
```
##Paso 6 : Finalmente as animações 🤹‍♀️
A ilusão é criada modificando a altura.
``` 
""@keyframes cafe-derramando {
  0% {
    height: 0; /*  inicio antes que se execute;*/
  }
  10% {
    height: 41%;
  }
  75% {
    height: 41%;
  }
  100% {
    height: 0%;
  }
}
```
A parte complicada é fazer com que o café se mova para cima 🔝enquanto aumenta de tamanho. Para conseguir esse efeito, é possível utilizar a propriedade translateY com um valor negativo em conjunto com scale. Isso fará com que o elemento seja primeiro movido para cima aumentado de tamanho gradualmente.☕☕

```
@keyframes fill {
  0% {
    transform: translate(-50%, -6%) scale(1, 0);
  }
  100% {
    transform: translate(-50%, -45%) scale(1);
  }
}""
```
Alguns links que podem ajudar 

[Transform origin](https://developer.mozilla.org/es/docs/Web/CSS/transform-origin);
[Cafe](https://developer.mozilla.org/es/docs/Web/CSS/transform-origin);
[Color Picker](https://imagecolorpicker.com/);
[Como centrar qualquer coisa](https://www.freecodecamp.org/espanol/news/centrar-en-html-div-con-css/);