/*
---
name: Animations
category: Foundations/Helpers
tag: helpers
---
Different animations for the elements:

* `.slide-in`
* `.fade-in`

```html
<p class="slide-in">
  This is a text with an animation
</p>
<p class="fade-in">
  This is a text with an animation
</p>
```
*/

@keyframes slide-in {
  from {
    transform: translateY(-10%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-in {
  animation: slide-in .150s ease-in;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fade-in .150s ease-in;
}