animated.css

1.bounce效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .bounce {
                -webkit-animation-name: bounce;
                animation-name: bounce;
                -webkit-transform-origin: center bottom;
                transform-origin: center bottom;
                animation: bounce .5s infinite;
            }
            
            .animated {
                -webkit-animation-duration: 1s;
                animation-duration: 1s;
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
            }
            
            @keyframes bounce {
                from,
                20%,
                53%,
                80%,
                to {
                    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                }
                40%,
                43% {
                    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
                    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
                    -webkit-transform: translate3d(0, -30px, 0);
                    transform: translate3d(0, -30px, 0);
                }
                70% {
                    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
                    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
                    -webkit-transform: translate3d(0, -15px, 0);
                    transform: translate3d(0, -15px, 0);
                }
                90% {
                    -webkit-transform: translate3d(0, -4px, 0);
                    transform: translate3d(0, -4px, 0);
                }
            }
        </style>
    </head>

    <body>
        <p class="bounce animated">Animation</p>
    </body>

</html>

 

 2.flash

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            @-webkit-keyframes flash {
    from,
    50%,
    to {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}

@keyframes flash {
    from,
    50%,
    to {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
    animation: flash .5s infinite;
    font-family: "楷体";
    font-size: 40px;
}
.animated {
                -webkit-animation-duration: 1s;
                animation-duration: 1s;
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
            }
        </style>
    </head>
    <body>
        <p class="flash animated">Animation</p>
    </body>
</html>

 3.shake

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            @keyframes shake {
    from,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
    font-family: "楷体";
    font-size: 40px;
    animation: shake .5s infinite;
}
.animated {
                -webkit-animation-duration: 1s;
                animation-duration: 1s;
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
            }
        </style>
    </head>
    <body>
        <p class="shake animated">Animation</p>
    </body>
</html>

 

  Animation

Animation

Animation

posted on 2016-08-16 10:51  宁缺John  阅读(238)  评论(0)  编辑  收藏  举报

导航