- var animate = true; - var page_animate = true; - var theme_customizer = true; - var tooltip = true; doctype html html(lang='en') include ../../components/header-files body include ../../components/loader // page-wrapper Start #pageWrapper.page-wrapper include ../../components/header // Page Body Start .page-body-wrapper.horizontal-menu include ../../components/sidebar .page-body .container-fluid .page-header .row .col-sm-6 h3 | Animate ol.breadcrumb li.breadcrumb-item a(href='index.html') | Home li.breadcrumb-item Animation li.breadcrumb-item.active Animate .col-sm-6 include ../../components/bookmark // Container-fluid starts .container-fluid .row .col-sm-12 .card .card-body .row .col-xl-6.col-md-8.offset-xl-3.offset-md-2 #animation-box .card .animate-widget div img.img-fluid(src='assets/images/banner/3.jpg', alt='') .text-center.p-25 p.text-muted.mb-0 | Denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings form.theme-form.text-center .form-group select.form-control.input.input--dropdown.js-animations optgroup(label='Attention Seekers') option(value='bounce') bounce option(value='flash') flash option(value='pulse') pulse option(value='rubberBand') rubberBand option(value='shake') shake option(value='swing') swing option(value='tada') tada option(value='wobble') wobble option(value='jello') jello optgroup(label='Bouncing Entrances') option(value='bounceIn') bounceIn option(value='bounceInDown') bounceInDown option(value='bounceInLeft') bounceInLeft option(value='bounceInRight') bounceInRight option(value='bounceInUp') bounceInUp optgroup(label='Bouncing Exits') option(value='bounceOut') bounceOut option(value='bounceOutDown') bounceOutDown option(value='bounceOutLeft') bounceOutLeft option(value='bounceOutRight') bounceOutRight option(value='bounceOutUp') bounceOutUp optgroup(label='Fading Entrances') option(value='fadeIn') fadeIn option(value='fadeInDown') fadeInDown option(value='fadeInDownBig') fadeInDownBig option(value='fadeInLeft') fadeInLeft option(value='fadeInLeftBig') fadeInLeftBig option(value='fadeInRight') fadeInRight option(value='fadeInRightBig') fadeInRightBig option(value='fadeInUp') fadeInUp option(value='fadeInUpBig') fadeInUpBig optgroup(label='Fading Exits') option(value='fadeOut') fadeOut option(value='fadeOutDown') fadeOutDown option(value='fadeOutDownBig') fadeOutDownBig option(value='fadeOutLeft') fadeOutLeft option(value='fadeOutLeftBig') fadeOutLeftBig option(value='fadeOutRight') fadeOutRight option(value='fadeOutRightBig') fadeOutRightBig option(value='fadeOutUp') fadeOutUp option(value='fadeOutUpBig') fadeOutUpBig optgroup(label='Flippers') option(value='flip') flip option(value='flipInX') flipInX option(value='flipInY') flipInY option(value='flipOutX') flipOutX option(value='flipOutY') flipOutY optgroup(label='Lightspeed') option(value='lightSpeedIn') lightSpeedIn option(value='lightSpeedOut') lightSpeedOut optgroup(label='Rotating Entrances') option(value='rotateIn') rotateIn option(value='rotateInDownLeft') rotateInDownLeft option(value='rotateInDownRight') rotateInDownRight option(value='rotateInUpLeft') rotateInUpLeft option(value='rotateInUpRight') rotateInUpRight optgroup(label='Rotating Exits') option(value='rotateOut') rotateOut option(value='rotateOutDownLeft') rotateOutDownLeft option(value='rotateOutDownRight') rotateOutDownRight option(value='rotateOutUpLeft') rotateOutUpLeft option(value='rotateOutUpRight') rotateOutUpRight optgroup(label='Sliding Entrances') option(value='slideInUp') slideInUp option(value='slideInDown') slideInDown option(value='slideInLeft') slideInLeft option(value='slideInRight') slideInRight optgroup(label='Sliding Exits') option(value='slideOutUp') slideOutUp option(value='slideOutDown') slideOutDown option(value='slideOutLeft') slideOutLeft option(value='slideOutRight') slideOutRight optgroup(label='Zoom Entrances') option(value='zoomIn') zoomIn option(value='zoomInDown') zoomInDown option(value='zoomInLeft') zoomInLeft option(value='zoomInRight') zoomInRight option(value='zoomInUp') zoomInUp optgroup(label='Zoom Exits') option(value='zoomOut') zoomOut option(value='zoomOutDown') zoomOutDown option(value='zoomOutLeft') zoomOutLeft option(value='zoomOutRight') zoomOutRight option(value='zoomOutUp') zoomOutUp optgroup(label='Specials') option(value='hinge') hinge option(value='jackInTheBox') jackInTheBox option(value='rollIn') rollIn option(value='rollOut') rollOut button.js-triggeraNimation.btn.btn-primary Animate it .col-sm-12 .card .card-header.pb-0 h5 How to use it? span | All you have to do is to add animation name class attribute to html element, like : code Fade .card-body.options.animat-md-center div flash div pulse div rubberBand div shake div swing div tada div wobble div jello div bounceIn div bounceInDown div bounceInLeft div bounceInRight div bounceInUp div bounceOut div bounceOutDown div bounceOutLeft div bounceOutRight div bounceOutUp div bounceOut div bounceOutDown div bounceOutLeft div bounceOutRight div bounceOutUp div fadeOut div fadeOutDown div fadeOutDownBig div fadeOutLeft div fadeOutLeftBig div fadeOutRight div fadeOutRightBig div fadeOutUp div fadeOutUpBig div flip div flipInX div flipInY div flipOutX div flipOutY div lightSpeedIn div lightSpeedOut div rotateIn div rotateInDownLeft div rotateInDownRight div rotateInUpLeft div rotateInUpRight div rotateOut div rotateOutDownLeft div rotateOutDownRight div rotateOutUpLeft div rotateOutUpRight div slideInUp div slideInDown div slideInLeft div slideInRight div slideOutUp div slideOutDown div slideOutLeft div slideOutRight div zoomIn div zoomInDown div zoomInLeft div zoomInRight div zoomInUp div zoomOut div zoomOutDown div zoomOutLeft div zoomOutRight div zoomOutUp div hinge div jackInTheBox div rollIn div rollOut // Container-fluid Ends include ../../components/footer include ../../components/footer-files