@extends('layouts.vertical', ["page_title"=> "Animation"])

@section('css')
<!-- third party css -->
<link href="{{asset('assets/libs/animate.css/animate.css.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endsection

@section('content')
<!-- Start Content-->
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">UBold</a></li>
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Extended UI</a></li>
                        <li class="breadcrumb-item active">Animation</li>
                    </ol>
                </div>
                <h4 class="page-title">Animation</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->


    <div class="row">
        <div class="col-12">

            <div class="card">
                <div class="card-body">
                    <h4 class="header-title">CSS3 Animation</h4>

                    <p class="sub-header">
                        Just-add-water CSS animations.
                    </p>

                    <div class="text-center">
                        <div id="animationSandbox">
                            <img src="{{asset('assets/images/macbook.png')}}" alt="" class="img-fluid center-block">
                        </div>
                    </div>

                    <form class="mt-5">
                        <div class="row justify-content-center">
                            <div class="col-sm-8">
                                <div class="input-group">

                                    <select class="form-select js--animations">
                                        <optgroup label="Attention Seekers">
                                            <option class="animate__bounce">bounce</option>
                                            <option class="animate__flash">flash</option>
                                            <option class="animate__flash">pulse</option>
                                            <option class="animate__rubberBand">rubberBand</option>
                                            <option class="animate__shakeX">shakeX</option>
                                            <option class="animate__shakeY">shakeY</option>
                                            <option class="animate__headShake">headShake</option>
                                            <option class="animate__swing">swing</option>
                                            <option class="animate__tada">tada</option>
                                            <option class="animate__wobble">wobble</option>
                                            <option class="animate__jello">jello</option>
                                            <option class="animate__heartBeat">heartBeat</option>
                                        </optgroup>

                                        <optgroup label="Back entrances">
                                            <option class="animate__backInDown">backInDown</option>
                                            <option class="animate__backInLeft">backInLeft</option>
                                            <option class="animate__backInRight">backInRight</option>
                                            <option class="animate__backInUp">backInUp</option>
                                        </optgroup>

                                        <optgroup label="Back exits">
                                            <option class="animate__backOutDown">backOutDown</option>
                                            <option class="animate__backOutLeft">backOutLeft</option>
                                            <option class="animate__backOutRight">backOutRight</option>
                                            <option class="animate__backOutUp">backOutUp</option>
                                        </optgroup>

                                        <optgroup label="Bouncing entrances">
                                            <option class="animate__bounceIn">bounceIn</option>
                                            <option class="animate__bounceInDown">bounceInDown</option>
                                            <option class="animate__bounceInLeft">bounceInLeft</option>
                                            <option class="animate__bounceInRight">bounceInRight</option>
                                            <option class="animate__bounceInUp">bounceInUp</option>
                                        </optgroup>

                                        <optgroup label="Bouncing exits">
                                            <option class="animate__bounceOut">bounceOut</option>
                                            <option class="animate__bounceOutDown">bounceOutDown</option>
                                            <option class="animate__bounceOutLeft">bounceOutLeft</option>
                                            <option class="animate__bounceOutRight">bounceOutRight</option>
                                            <option class="animate__bounceOutUp">bounceOutUp</option>
                                        </optgroup>

                                        <optgroup label="Fading Entrances">
                                            <option class="animate__fadeIn">fadeIn</option>
                                            <option class="animate__fadeInDown">fadeInDown</option>
                                            <option class="animate__fadeInDownBig">fadeInDownBig</option>
                                            <option class="animate__fadeInLeft">fadeInLeft</option>
                                            <option class="animate__fadeInLeftBig">fadeInLeftBig</option>
                                            <option class="animate__fadeInRight">fadeInRight</option>
                                            <option class="animate__fadeInRightBig">fadeInRightBig</option>
                                            <option class="animate__fadeInUp">fadeInUp</option>
                                            <option class="animate__fadeInUpBig">fadeInUpBig</option>
                                            <option class="animate__fadeInTopLeft">fadeInTopLeft</option>
                                            <option class="animate__fadeInTopRight">fadeInTopRight</option>
                                            <option class="animate__fadeInBottomLeft">fadeInBottomLeft</option>
                                            <option class="animate__fadeInBottomRight">fadeInBottomRight</option>
                                        </optgroup>

                                        <optgroup label="Fading Exits">
                                            <option class="animate__fadeOut">fadeOut</option>
                                            <option class="animate__fadeOutDown">fadeOutDown</option>
                                            <option class="animate__fadeOutDownBig">fadeOutDownBig</option>
                                            <option class="animate__fadeOutLeft">fadeOutLeft</option>
                                            <option class="animate__fadeOutLeftBig">fadeOutLeftBig</option>
                                            <option class="animate__fadeOutRight">fadeOutRight</option>
                                            <option class="animate__fadeOutRightBig">fadeOutRightBig</option>
                                            <option class="animate__fadeOutUp">fadeOutUp</option>
                                            <option class="animate__fadeOutUpBig">fadeOutUpBig</option>
                                            <option class="animate__fadeOutTopLeft">fadeOutTopLeft</option>
                                            <option class="animate__fadeOutTopRight">fadeOutTopRight</option>
                                            <option class="animate__fadeOutBottomRight">fadeOutBottomRight</option>
                                            <option class="animate__fadeOutBottomLeft">fadeOutBottomLeft</option>
                                        </optgroup>

                                        <optgroup label="Flippers">
                                            <option class="animate__flip">flip</option>
                                            <option class="animate__flipInX">flipInX</option>
                                            <option class="animate__flipInY">flipInY</option>
                                            <option class="animate__flipOutX">flipOutX</option>
                                            <option class="animate__flipOutY">flipOutY</option>
                                        </optgroup>

                                        <optgroup label="Lightspeed">
                                            <option class="animate__lightSpeedInRight">lightSpeedInRight</option>
                                            <option class="animate__lightSpeedInLeft">lightSpeedInLeft</option>
                                            <option class="animate__lightSpeedOutRight">lightSpeedOutRight</option>
                                            <option class="animate__lightSpeedOutLeft">lightSpeedOutLeft</option>
                                        </optgroup>

                                        <optgroup label="Rotating Entrances">
                                            <option class="animate__rotateIn">rotateIn</option>
                                            <option class="animate__rotateInDownLeft">rotateInDownLeft</option>
                                            <option class="animate__rotateInDownRight">rotateInDownRight</option>
                                            <option class="animate__rotateInUpLeft">rotateInUpLeft</option>
                                            <option class="animate__rotateInUpRight">rotateInUpRight</option>
                                        </optgroup>

                                        <optgroup label="Rotating Exits">
                                            <option class="animate__rotateOut">rotateOut</option>
                                            <option class="animate__rotateOutDownLeft">rotateOutDownLeft</option>
                                            <option class="animate__rotateOutDownRight">rotateOutDownRight</option>
                                            <option class="animate__rotateOutUpLeft">rotateOutUpLeft</option>
                                            <option class="animate__rotateOutUpRight">rotateOutUpRight</option>
                                        </optgroup>

                                        <optgroup label="Specials">
                                            <option class="animate__hinge">hinge</option>
                                            <option class="animate__jackInTheBox">jackInTheBox</option>
                                            <option class="animate__rollIn">rollIn</option>
                                            <option class="animate__rollOut">rollOut</option>
                                        </optgroup>

                                        <optgroup label="Sliding Entrances">
                                            <option class="animate__slideInDown">slideInDown</option>
                                            <option class="animate__slideInLeft">slideInLeft</option>
                                            <option class="animate__slideInRight">slideInRight</option>
                                            <option class="animate__slideInUp">slideInUp</option>
                                        </optgroup>

                                        <optgroup label="Sliding exits">
                                            <option class="animate__slideOutDown">slideOutUp</option>
                                            <option class="animate__slideOutLeft">slideOutDown</option>
                                            <option class="animate__slideOutRight">slideOutLeft</option>
                                            <option class="animate__slideOutUp">slideOutRight</option>

                                        </optgroup>

                                        <optgroup label="Zooming entrances">
                                            <option class="animate__zoomIn">zoomIn</option>
                                            <option class="animate__zoomInDown">zoomInDown</option>
                                            <option class="animate__zoomInLeft">zoomInLeft</option>
                                            <option class="animate__zoomInRight">zoomInRight</option>
                                            <option class="animate__zoomInUp">zoomInUp</option>
                                        </optgroup>

                                        <optgroup label="Zooming exits">
                                            <option class="animate__zoomOut">zoomOut</option>
                                            <option class="animate__zoomOutDown">zoomOutDown</option>
                                            <option class="animate__zoomOutLeft">zoomOutLeft</option>
                                            <option class="animate__zoomOutRight">zoomOutRight</option>
                                            <option class="animate__zoomOutUp">zoomOutUp</option>
                                        </optgroup>
                                    </select>

                                    <button class="btn input-group-text btn-primary waves-light waves-effect js--triggerAnimation" type="button">Animate Me !</button>
                                </div>
                                <!-- /input-group -->

                            </div> <!-- end col-->
                        </div> <!-- end row-->

                    </form>
                </div>
            </div> <!-- end card -->

        </div> <!-- end col -->
    </div>
    <!-- end row-->

</div> <!-- container -->
@endsection

@section('script')
<!-- demo app -->
<script src="{{asset('assets/js/pages/animation.init.js')}}"></script>
<!-- end demo js-->
@endsection