animation

_animation.sass

.anim-fade-in
  animation-name: fade-in
  animation-duration: 1s
  animation-timing-function: ease-in-out
  &.fast
    animation-duration: 300ms

@keyframes fade-in
  0%
    opacity: 0

  100%
    opacity: 1


.anim-fade-out
  animation-name: fade-out
  animation-duration: 1s
  animation-timing-function: ease-out
  &.fast
    animation-duration: 0.3s

@keyframes fade-out
  0%
    opacity: 1

  100%
    opacity: 0


.anim-fade-up
  opacity: 0
  animation-name: fade-up
  animation-duration: 0.3s
  animation-fill-mode: forwards
  animation-timing-function: ease-out
  animation-delay: 1s

@keyframes fade-up
  0%
    opacity: 0.8
    transform: translateY(100%)

  100%
    opacity: 1
    transform: translateY(0)


.anim-fade-down
  animation-name: fade-down
  animation-duration: 0.3s
  animation-fill-mode: forwards
  animation-timing-function: ease-in

@keyframes fade-down
  0%
    opacity: 1
    transform: translateY(0)

  100%
    opacity: 0.5
    transform: translateY(100%)


.anim-grow-x
  width: 0%
  animation-name: grow-x
  animation-duration: 0.3s
  animation-fill-mode: forwards
  animation-timing-function: ease
  animation-delay: 0.5s

@keyframes grow-x
  to
    width: 100%


.anim-shrink-x
  animation-name: shrink-x
  animation-duration: 0.3s
  animation-fill-mode: forwards
  animation-timing-function: ease-in-out
  animation-delay: 0.5s

@keyframes shrink-x
  to
    width: 0%


.anim-scale-in
  animation-name: scale-in
  animation-duration: 0.15s
  animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5)

@keyframes scale-in
  0%
    opacity: 0
    transform: scale(0.5)

  100%
    opacity: 1
    transform: scale(1)


.anim-pulse
  animation-name: pulse
  animation-duration: 2s
  animation-timing-function: linear
  animation-iteration-count: infinite

@keyframes pulse
  0%
    opacity: 0.3

  10%
    opacity: 1

  100%
    opacity: 0.3


.anim-pulse-in
  animation-name: pulse-in
  animation-duration: 0.5s

@keyframes pulse-in
  0%
    transform: scale3d(1, 1, 1)

  50%
    transform: scale3d(1.1, 1.1, 1.1)

  100%
    transform: scale3d(1, 1, 1)