logo

Welcome to

paradise

We would like to thank you for purchasing Paradise Slider!
We are very pleased that you have chosen Paradise Slider for your Project.

Buy Now

Animation

We used animate.css of Daniel Eden for animation. You can create your own animation easily by using animation.css.

01 - How to Use

Required Files And Folders

HTML Structure

  <h3 data-animation="animated fadeInUp">your text</h3>

CSS Structure

You can change the duration of your animations, add a delay or change the number of times that it plays:

  #yourElement {
    -vendor-animation-delay: 2s;
    -vendor-animation-duration: 3s;
    -vendor-animation-iteration-count: infinite;
  }

02 - Animation Types

  1. bounce

    • data-animation="animated bounce"
  2. flash

    • data-animation="animated flash"
  3. pulse

    • data-animation="animated pulse"
  4. rubberBand

    • data-animation="animated rubberBand"
  5. shake

    • data-animation="animated shake"
  6. swing

    • data-animation="animated swing"
  7. tada

    • data-animation="animated tada"
  8. wobble

    • data-animation="animated wobble"
  9. jello

    • data-animation="animated jello"
  10. bounce In

    • data-animation="animated bounceIn"
  11. bounce In Down

    • data-animation="animated bounceInDown"
  12. bounce In Up

    • data-animation="animated bounceInUp"
  13. bounce In Right

    • data-animation="animated bounceInRight"
  14. bounce In Left

    • data-animation="animated bounceInLeft"
  15. fade In

    • data-animation="animated fadeIn"
  16. fade In Down

    • data-animation="animated fadeInDown"
  17. fade In Down Big

    • data-animation="animated fadeInDownBig"
  18. fade In Up

    • data-animation="animated fadeInUp"
  19. fade In Up Big

    • data-animation="animated fadeInUpBig"
  20. fade In right

    • data-animation="animated fadeInRight"
  21. fade In Right Big

    • data-animation="animated fadeInRightBig"
  22. fade In Left

    • data-animation="animated fadeInLeft"
  23. fade In Left Big

    • data-animation="animated fadeInLeftBig"
  24. flip In X

    • data-animation="animated flipInX"
  25. flip In Y

    • data-animation="animated flipInY"
  26. light Speed In

    • data-animation="animated lightSpeedIn"
  27. rotate In

    • data-animation="animated rotateIn"
  28. rotate In Down Left

    • data-animation="animated rotateInDownLeft"
  29. rotate In Down Right

    • data-animation="animated rotateInDownRight"
  30. rotate In Up Left

    • data-animation="animated rotateInUpLeft"
  31. rotate In Up Right

    • data-animation="animated rotateInUpRight"
  32. roll In

    • data-animation="animated rollIn"
  33. zoom In

    • data-animation="animated zoomIn"
  34. zoom In Down

    • data-animation="animated zoomInDown"
  35. zoom In Up

    • data-animation="animated zoomInUp"
  36. zoom In Left

    • data-animation="animated zoomInLeft"
  37. zoom In right

    • data-animation="animated zoomInRight"
  38. slide In Down

    • data-animation="animated slideInDown"
  39. slide In Up

    • data-animation="animated slideInUp"
  40. slide In Left

    • data-animation="animated slideInLeft"
  41. slide In Right

    • data-animation="animated slideInRight"

03 - More

For further guideline just read the following complete tutorial about animation.css;

You can also read more about animation.css plugIn usage from this article;

04 - Support

Please do not hesitate if you have any queries about this product. We are always there for your help. You can contact us on this e-mail address szthemes1@gmail.com