zoukankan html css js c++ java

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

查看全文

相关阅读:
七夜在线音乐台开发第二弹 (原创)
七夜在线音乐台开发第一弹 (原创)
逆向某停车app(原创)
(原创)python发送邮件
 申论（写作篇）之“人民时评”帮你写好作文
 行测（爆发篇）之片段阅读，不能只靠语感
 行测（爆发篇）之逻辑填空
 申论（写作篇）之文字表达能力提升
 申论（写作篇）之花木体申论写作法
 公考笔记整理（全）

原文地址：https://www.cnblogs.com/Johnon/p/5775534.html