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

查看全文

相关阅读:
TCP详解——传输控制协议（总述）
sublime text3使用插件SublimeTextTrans设置透明度
 vue学习1
js事件绑定/监听
 如何成为顶级程序猿
 HTML5中meta属性
 windows安装SVN服务器并设置开机启动
 oracle安装登录sqlplus / as sysdba然后报错ERROR: ORA-01031 insufficient privileges
移动端和PC端有什么区别
 div+css通用兼容性代码整理

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