• 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
  • 相关阅读:
    IP的幻觉
    糟糕的一天
    windows下批量生成文件
    基于Bandersnatch搭建本地pypi源
    vmware vsphere 无法启动故障；
    关于Centos7客户端代理配置
    怎样在交换机判断是否出现环路了呢？
    小小的网络故障
    express for LINUX
    ESXI 7.0 ovf 导出；
  • 原文地址：https://www.cnblogs.com/Johnon/p/5775534.html
Copyright © 2020-2023  润新知