zoukankan      html  css  js  c++  java
  • Animation用法

    测试代码及说明:

    <!DOCTYPE html>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>Simple CSS3 Animation</title>
        <style type="text/css">
            #demo {
                position: absolute;
                left: 30%;
                top: 30%;
                background-color: red;
                width: 200px;
                height: 200px;
                -webkit-animation: animation1 2s linear forwards; /*只有Webkit内核的浏览器才能解析*/
                -moz-animation: animation1 2s linear forwards; /*Firefox浏览器私有属性*/
                -o-animation: animation1 2s linear forwards; /*Opera浏览器私有属性*/
                -ms-animation: animation1 2s linear forwards; /*IE浏览器私有属性*/
                animation: animation1 2s linear forwards; /*Firefox浏览器私有属性*/
            }
    
            @-webkit-keyframes animation1 {
                0% {
                    background: red;
                }
    
                50% {
                    background: blue;
                }
    
                100% {
                    background: yellow;
                }
            }
    
            @-moz-keyframes animation1 {
                0% {
                    background: red;
                }
    
                50% {
                    background: blue;
                }
    
                100% {
                    background: yellow;
                }
    
            }
    
            @-o-keyframes animation1 {
                0% {
                    background: red;
                }
    
                50% {
                    background: blue;
                }
    
                100% {
                    background: yellow;
                }
    
            }
    
            @-ms-keyframes animation1 {
                0% {
                    background: red;
                }
    
                50% {
                    background: blue;
                }
    
                100% {
                    background: yellow;
                }
            }
    
            @keyframes animation1 {
                0% {
                    background: red;
                }
    
                50% {
                    background: blue;
                }
    
                100% {
                    background: yellow;
                }
    
            }
        </style>
    </head>
    <body>
        <div id="demo">
        </div>
    </body>
    </html>
    View Code

    演示效果:

  • 相关阅读:
    6.Ray-消息订阅器编写
    附录:2-Event Sourcing pattern (事件溯源设计模式)
    附录:1-Grain生命周期-译注
    4.Ray-Handler之CoreHandler编写
    Q&A-20180128
    TODO
    3.Ray-Event编写
    缓存技术内部交流_01_Ehcache3简介
    Spring AMQP 源码分析 04
    Spring AMQP 源码分析 03
  • 原文地址:https://www.cnblogs.com/sccd/p/5571165.html
Copyright © 2011-2022 走看看