animations.md

Animations

You are free to create or copy any css animations.

1. Add you animation styles into your root component

In this example i just copied one of animate.css animations

:host /deep/ .bounceInDown {
  animation-name: bounceInDown;
}


@keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    /*opacity: 0;*/
    transform: translate3d(0, -3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0) scaleY(.9);
  }

  75% {
    transform: translate3d(0, -10px, 0) scaleY(.95);
  }

  90% {
    transform: translate3d(0, 5px, 0) scaleY(.985);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

Important to understand why we use :host /deep/ before class name - component styling

2. Now i would call my notification like that

this.snotifyService.success(this.body, this.title, {
  animation: {
    enter: 'bounceInDown',
    exit: 'bounceInDown',
    time: 1000
  }
});