Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import or require. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
                <!-- Always shows a header, even in smaller screens. -->
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

    <header class="mdl-layout__header header-white">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">DeAnimate <small>A jQuery lightweight plugin for Animation</small></span>
        <!-- Add spacer, to align navigation to the right -->
        <div class="mdl-layout-spacer"></div>
        <!-- Navigation. We hide it in small screens. -->
        <nav class="mdl-navigation mdl-layout--large-screen-only">
          <a class="mdl-navigation__link" href="#flipRotate">Flip / Rotate</a>
          <a class="mdl-navigation__link" href="#fade">Fade</a>
          <a class="mdl-navigation__link" href="#zoom">Zoom</a>
          <a class="mdl-navigation__link" href="#bounce">Bounce</a>
          <a class="mdl-navigation__link" href="#others">Others</a>
          <a class="mdl-navigation__link fork-me" href="https://github.com/thiagoh/de-animate" target="_blank">Fork on github</a>
          <a class="mdl-navigation__link more-details" href="https://thiagoh.github.io/de-animate/" target="_blank">oficial page</a>
        </nav>
      </div>
    </header>

    <main class="mdl-layout__content">
      <div class="page-content">

        <div class="mdl-grid container">

          <!-- Flip / Rotate -->

          <div id="flipRotate" class="mdl-cell mdl-cell--12-col">
            <h3>Flip / Rotate <small>click any of these components below</small></h3>
          </div>

          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-1" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FlipInX.png" alt="" />
                  <h2 class="mdl-card__title-text">Back FlipInX</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Flipped X
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FlipOutX.png" alt="" />
                  <h2 class="mdl-card__title-text">Front FlipInX</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Flipped X
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-2" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FlipInY.png" alt="" />
                  <h2 class="mdl-card__title-text">Back FlipInY</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Flipped Y
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FlipOutY.png" alt="" />
                  <h2 class="mdl-card__title-text">Front FlipInY</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Flipped Y
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-3" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/rotateIn.png" alt="" />
                  <h2 class="mdl-card__title-text">Back RotateIn</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Rotate
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/rotateOut.png" alt="" />
                  <h2 class="mdl-card__title-text">Front RotateIn</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Rotate
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>

          <!-- Fade -->

          <div id="fade" class="mdl-cell mdl-cell--12-col">
            <h3>Fade <small>click any of these components below</small></h3>
          </div>

          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-4" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeIn.png" alt="" />
                  <h2 class="mdl-card__title-text">Back FadeIn</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Fade In
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeOut.png" alt="" />
                  <h2 class="mdl-card__title-text">Front FadeIn</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Fade In
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-5" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeInDown.png" alt="" />
                  <h2 class="mdl-card__title-text">Back FadeInDown</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Fade In Down
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeOutDown.png" alt="" />
                  <h2 class="mdl-card__title-text">Front FadeInDown</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Fade In Down
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-6" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeInDownBig.png" alt="" />
                  <h2 class="mdl-card__title-text">Back FadeInDownBig</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Fade In Down Big
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeOutDownBig.png" alt="" />
                  <h2 class="mdl-card__title-text">Front FadeInDownBig</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Fade In Down Big
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>

          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-7" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeInLeft.png" alt="" />
                  <h2 class="mdl-card__title-text">Back FadeInLeft</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Fade In Left
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeOutLeft.png" alt="" />
                  <h2 class="mdl-card__title-text">Front FadeInLeft</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Fade In Left
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-8" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeInLeftBig.png" alt="" />
                  <h2 class="mdl-card__title-text">Back FadeInLeftBig</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Fade In Left Big
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeOutLeftBig.png" alt="" />
                  <h2 class="mdl-card__title-text">Front FadeInLeftBig</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Fade In Left Big
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-9" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeInRight.png" alt="" />
                  <h2 class="mdl-card__title-text">Back FadeInRight</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Fade In Right
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeOutRight.png" alt="" />
                  <h2 class="mdl-card__title-text">Front FadeInRight</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Fade In Right
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>

          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-10" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeInRightBig.png" alt="" />
                  <h2 class="mdl-card__title-text">Back FadeInRightBig</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Fade In Right Big
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeOutRightBig.png" alt="" />
                  <h2 class="mdl-card__title-text">Front FadeInRightBig</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Fade In Right Big
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-11" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeInUp.png" alt="" />
                  <h2 class="mdl-card__title-text">Back FadeInUp</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Fade In Up
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeOutUp.png" alt="" />
                  <h2 class="mdl-card__title-text">Front FadeInUp</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Fade In Up
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-12" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeInUpBig.png" alt="" />
                  <h2 class="mdl-card__title-text">Back FadeInUpBig</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Fade In Up Big
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/FadeOutUpBig.png" alt="" />
                  <h2 class="mdl-card__title-text">Front FadeInUpBig</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Fade In Up Big
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>

          <!-- Zoom -->

          <div id="zoom" class="mdl-cell mdl-cell--12-col">
            <h3>Zoom <small>click any of these components below</small></h3>
          </div>

          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-13" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/ZoomIn.png" alt="" />
                  <h2 class="mdl-card__title-text">Back ZoomIn</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Zoom In
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/ZoomOut.png" alt="" />
                  <h2 class="mdl-card__title-text">Front ZoomIn</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Zoom In
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-14" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/ZoomInLeft.png" alt="" />
                  <h2 class="mdl-card__title-text">Back ZoomInLeft</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Zoom In Left
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/ZoomOutLeft.png" alt="" />
                  <h2 class="mdl-card__title-text">Front ZoomInLeft</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Zoom In Left
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-15" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/ZoomInRight.png" alt="" />
                  <h2 class="mdl-card__title-text">Back ZoomInRight</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Zoom In Right
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/ZoomOutRight.png" alt="" />
                  <h2 class="mdl-card__title-text">Front ZoomInRight</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Zoom In Right
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-16" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/ZoomInDown.png" alt="" />
                  <h2 class="mdl-card__title-text">Back ZoomInDown</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Zoom In Down
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/ZoomOutDown.png" alt="" />
                  <h2 class="mdl-card__title-text">Front ZoomInDown</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Zoom In Down
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-17" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/ZoomInUp.png" alt="" />
                  <h2 class="mdl-card__title-text">Back ZoomInUp</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Zoom In Up
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/ZoomOutUp.png" alt="" />
                  <h2 class="mdl-card__title-text">Front ZoomInUp</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Zoom In Up
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>

          <!-- Bounce -->

          <div id="bounce" class="mdl-cell mdl-cell--12-col">
            <h3>Bounce <small>click any of these components below</small></h3>
          </div>

          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-18" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/BounceIn.png" alt="" />
                  <h2 class="mdl-card__title-text">Back BounceIn</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Bounce In
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/BounceOut.png" alt="" />
                  <h2 class="mdl-card__title-text">Front BounceIn</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Bounce In
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-19" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/BounceInLeft.png" alt="" />
                  <h2 class="mdl-card__title-text">Back BounceInLeft</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Bounce In Left
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/BounceOutLeft.png" alt="" />
                  <h2 class="mdl-card__title-text">Front BounceInLeft</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Bounce In Left
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-20" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/BounceInRight.png" alt="" />
                  <h2 class="mdl-card__title-text">Back BounceInRight</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Bounce In Right
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/BounceOutRight.png" alt="" />
                  <h2 class="mdl-card__title-text">Front BounceInRight</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Bounce In Right
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-21" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/BounceInLDown.png" alt="" />
                  <h2 class="mdl-card__title-text">Back BounceInDown</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Bounce In Down
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/BounceOutDown.png" alt="" />
                  <h2 class="mdl-card__title-text">Front BounceInDown</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Bounce In Down
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-22" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/BounceInUp.png" alt="" />
                  <h2 class="mdl-card__title-text">Back BounceInUp</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Bounce In Up
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/BounceOutUp.png" alt="" />
                  <h2 class="mdl-card__title-text">Front BounceInUp</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Bounce In Up
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>

          <!-- Others -->

          <div id="others" class="mdl-cell mdl-cell--12-col">
            <h3>Others <small>click any of these components below</small></h3>
          </div>

          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-23" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/LightSpeedOut.png" alt="" />
                  <h2 class="mdl-card__title-text">Back LightSpeedIn</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Light Speed In
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/LightSpeedOut.png" alt="" />
                  <h2 class="mdl-card__title-text">Front LightSpeedIn</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Light Speed In
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="mdl-cell mdl-cell-custom mdl-cell--4-col">

            <div id="card-24" class="card animated">

              <div class="back demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/RollIn.png" alt="" />
                  <h2 class="mdl-card__title-text">Back RollIn</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Back of Panel content Roll In
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

              <div class="front demo-card-square mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                  <img class="avatar" src="http://api.adorable.io/avatars/136/RollOut.png" alt="" />
                  <h2 class="mdl-card__title-text">Front RollIn</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  Front of Panel content Roll In
                </div>
                <div class="mdl-card__actions mdl-card--border">
                  <div class="mdl-button mdl-button--colored">
                    toggle card
                  </div>
                </div>
              </div>

            </div>

          </div>

        </div>

      </div>
    </main>
    
    <footer class="mdl-mini-footer">
  <div class="mdl-mini-footer__left-section">
    <div class="mdl-logo">DeAnimate</div>
    <ul class="mdl-mini-footer__link-list">
      <li><a href="https://thiagoh.github.io/de-animate" target="_blank">oficial page</a></li>
    </ul>
  </div>
</footer>

    
  </div>
            
          
!
            
              .card {
  position: relative;
}
.card .front,
.card .back {
  position: absolute;
  left: 0;
  top: 0;
}
.card .mdl-card {
  width: 100%;
  height: 320px;
}
.card .avatar {
  position: absolute;
  right: 30px;
  top: 30px;
  border-radius: 50%;
}
.card .front .mdl-card__title,
.card .back .mdl-card__title {
  color: #fff;
}
.card .front .mdl-card__title {
  background-color: rgb(244,67,54);
}
.card .back .mdl-card__title {
  background-color: rgb(63, 81, 181);
}
.card .mdl-button {
  transition: none !important;
}

/*default*/

body {
  overflow-x: hidden;
}

.header-white {
  background-color: #fff;
  color: #000;
}

.header-white small {
  color: #999;
}

.header-white .mdl-navigation__link {
  color: #424242;
}

.container {
  width: 1200px;
  margin: 0 auto;
}
.container .mdl-cell-custom {
  height: 320px;
  position: relative;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loading {
  animation-duration: 0.75s;
  animation-iteration-count: infinite;
  animation-name: rotate;
  animation-timing-function: linear;
  height: 20px;
  width: 20px;
  border: 4px solid rgb(63, 81, 181);
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
}

.header-white .mdl-navigation__link.fork-me {
  background-color: #673ab7;
  color: #fff;
}

.header-white .mdl-navigation__link.more-details {
  background-color: #CDDC39;
  color: #333;
}
            
          
!
            
              
  //deAnimate
  $('#card-1').deAnimate({
    trigger: 'click',
    classIn: 'flipInX',
    parallel: false
  });
  $('#card-2').deAnimate({
    trigger: 'click',
    classIn: 'flipInY',
    parallel: false
  });
  $('#card-3').deAnimate({
    trigger: 'click',
    classIn: 'rotateIn',
    parallel: false
  });
  $('#card-4').deAnimate({
    trigger: 'click',
    classIn: 'fadeIn',
    parallel: false
  });
  $('#card-5').deAnimate({
    trigger: 'click',
    classIn: 'fadeInDown',
    parallel: false
  });
  $('#card-6').deAnimate({
    trigger: 'click',
    classIn: 'fadeInDownBig',
    parallel: false
  });
  $('#card-7').deAnimate({
    trigger: 'click',
    classIn: 'fadeInLeft',
    parallel: false
  });
  $('#card-8').deAnimate({
    trigger: 'click',
    classIn: 'fadeInLeftBig',
    parallel: false
  });
  $('#card-9').deAnimate({
    trigger: 'click',
    classIn: 'fadeInRight',
    parallel: false
  });
  $('#card-10').deAnimate({
    trigger: 'click',
    classIn: 'fadeInRightBig',
    parallel: false
  });
  $('#card-11').deAnimate({
    trigger: 'click',
    classIn: 'fadeInUp',
    parallel: false
  });
  $('#card-12').deAnimate({
    trigger: 'click',
    classIn: 'fadeInUpBig',
    parallel: false
  });
  $('#card-13').deAnimate({
    trigger: 'click',
    classIn: 'zoomIn',
    parallel: false
  });
  $('#card-14').deAnimate({
    trigger: 'click',
    classIn: 'zoomInLeft',
    parallel: false
  });
  $('#card-15').deAnimate({
    trigger: 'click',
    classIn: 'zoomInRight',
    parallel: false
  });
  $('#card-16').deAnimate({
    trigger: 'click',
    classIn: 'zoomInDown',
    parallel: false
  });
  $('#card-17').deAnimate({
    trigger: 'click',
    classIn: 'zoomInUp',
    parallel: false
  });
  $('#card-18').deAnimate({
    trigger: 'click',
    classIn: 'bounceIn',
    parallel: false
  });
  $('#card-19').deAnimate({
    trigger: 'click',
    classIn: 'bounceInLeft',
    parallel: false
  });
  $('#card-20').deAnimate({
    trigger: 'click',
    classIn: 'bounceInRight',
    parallel: false
  });
  $('#card-21').deAnimate({
    trigger: 'click',
    classIn: 'bounceInDown',
    parallel: false
  });
  $('#card-22').deAnimate({
    trigger: 'click',
    classIn: 'bounceInUp',
    parallel: false
  });
  $('#card-23').deAnimate({
    trigger: 'click',
    classIn: 'lightSpeedIn',
    parallel: false
  });
  $('#card-24').deAnimate({
    trigger: 'click',
    classIn: 'rollIn',
    parallel: false
  });
            
          
!
999px

Console