一款jQuery轻量级的动画插件DeAnimate功能演示

使用DeAnimate构建的各种卡片翻转（Animated Cards）动画。

html5, card

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1091
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

//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
});

编译

CSS

.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;
}

HTML

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

<header class="mdl-layout__header header-white">
        <div class="mdl-layout__header-row">
            
            <span class="mdl-layout-title">DeAnimate <small>A jQuery lightweight plugin for Animation</small></span>
            
            <div class="mdl-layout-spacer"></div>
            
            <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>
            </nav>
        </div>
    </header>

<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="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 id="fade" class="mdl-cell mdl-cell--12-col">
                    <h3>Fade <small>click any of these components below</small></h3>
                </div>

<div class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 id="zoom" class="mdl-cell mdl-cell--12-col">
                    <h3>Zoom <small>click any of these components below</small></h3>
                </div>

<div class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 id="bounce" class="mdl-cell mdl-cell--12-col">
                    <h3>Bounce <small>click any of these components below</small></h3>
                </div>

<div class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 id="others" class="mdl-cell mdl-cell--12-col">
                    <h3>Others <small>click any of these components below</small></h3>
                </div>

<div class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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 class="back demo-card-square mdl-card mdl-shadow--2dp">
                            <div class="mdl-card__title mdl-card--expand">
                                <img class="avatar" src="https://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="https://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>
    </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">view more details</a>
                </li>
            </ul>
        </div>
    </footer>
</div>

使用DeAnimate构建的各种卡片翻转（Animated Cards）动画。

html5, card

编辑器支持Emmet

快捷键

使用DeAnimate构建的各种卡片翻转（Animated Cards）动画。

html5, card

jQuery+iziModal.js邮件发送成功弹出框提示信息条动画

使用Flipping.animationFrame.js实现的响应式房屋变形动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：