Animações / Animations

72 animações que funcionam no envento load, basta definir uma animação Trigger, Load, na página.
72 animations that work on the load event, just define a Trigger, Load, animation on the page.

  1. bounce
  2. bounceIn
  3. bounceInDown
  4. bounceInLeft
  5. bounceInRight
  6. bounceInUp
  7. bounceOut
  8. bounceOutDown
  9. bounceOutLeft
  10. bounceOutRight
  11. bounceOutUp
  12. fadeIn
  13. fadeInDown
  14. fadeInDownBig
  15. fadeInLeft
  16. fadeInLeftBig
  17. fadeInRight
  18. fadeInRightBig
  19. fadeInUp
  20. fadeInUpBig
  21. fadeOut
  22. fadeOutDown
  23. fadeOutDownBig
  24. fadeOutLeft
  25. fadeOutLeftBig
  26. fadeOutRight
  27. fadeOutRightBig
  28. fadeOutUp
  29. fadeOutUpBig
  30. flash
  31. flip
  32. flipInX
  33. flipInY
  34. flipOutX
  35. flipOutY
  36. headShake
  37. hinge
  38. jello
  39. lightSpeedIn
  40. lightSpeedOut
  41. pulse
  42. rollIn
  43. rollOut
  44. rotateIn
  45. rotateInDownLeft
  46. rotateInDownRight
  47. rotateInUpLeft
  48. rotateInUpRight
  49. rotateOut
  50. rotateOutDownLeft
  51. rotateOutDownRight
  52. rotateOutUpLeft
  53. rotateOutUpRight
  54. rubberBand
  55. shake
  56. slideInDown
  57. slideInLeft
  58. slideInRight
  59. slideInUp
  60. slideOutDown
  61. slideOutLeft
  62. slideOutRight
  63. slideOutUp
  64. swing
  65. tada
  66. wobble
  67. zoomIn
  68. zoomInDown
  69. zoomInLeft
  70. zoomInRight
  71. zoomInUp
  72. zoomOut
  73. zoomOutDown
  74. zoomOutLeft
  75. zoomOutRight
  76. zoomOutUp
1 Like

Awesome list thanks, but how are you using them? There are only 9 of them in my list of animations.

There’s the site here animate.css

lol once again I didn’t ask completely. I would like to know how it was done in BSS without there being so many in the dropdown. Just adding the classes for them manually?

@Martin is there a reason we don’t have access to all of these within BSS’s setup? I know it’s a lot of them, but maybe could be broken down by type or something? Just curious as I didn’t realize there were so many of them.

We only support the animations in animate.css’ “Attention Seekers” category, because the animated element starts and ends at the same position (in other words the animation can loop). The other effects (entrances and exits) look bad when looping or offer poor usability when triggered on hover.

You can of course add class names to the element and use any animation you like.

2 Likes

Espero que a imagem ajude, os nomes das animações tem que ser escrito exatamente igual, maiúsculas e minúsculas.

Sou brasileiro, então na gíria que usamos, show!