Change Animation Type to Tada

To Change the Animation type for floating styles to “tada”

Navigate to Animation Settings ( Click -> Customize Styles – Animations )

Change “Animation Class name”, “Animation CSS code”.

Animation Class name: tada

Animation code :

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  animation-name: tada;
animation-name: fadeIn;
}

See here, how it looks like.

---

Tada Animation code form Animate.css 

It easy to select animation type from this Animate.css Demo, For performance reason, Instead of we adding a bundle with a lot of animations types,  we added a way to add only selected animation type.