zoukankan      html  css  js  c++  java
  • css3动画写法

    今天自己摸索了一下css3动画的写法,主要是兼容w3c和WebKit引擎写法。以下是我简单的实现了一个循环播放的家在动画,代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>chasing dot</title>
            <style type="text/css">
                .spiner{//定义容器
                    margin:100px auto;
                    width:40px;
                    height:40px;
                    position:relative;
                    text-align:center;
                    
                    -webkit-animation:rotate 2s infinite linear;//容器加载旋转动画,用时2s,无限循环,线性速度
                    animation:rotate 2s infinite linear;
                }
                .dot1, .dot2{//定义运动元素 可以采用伪元素来代替
                    position: absolute;
                    width:60%;
                    height:60%;
                    display:inline-block;
                    top:0;
                    background-color:#333;
                    border-radius:100%;
                    
                    -webkit-animation: zoom 2s infinite linear;//运动加载缩放动画,用时2S,无限循环,线性速度
                    animation: zoom 2s infinite linear;
                }
                .dot2{
                    top:auto;
                    bottom:0;
                    -webkit-animation-delay:-1.0s;
                    animation-delay:-1.0s;
                }
                @-webkit-keyframes rotate{//定义旋转动画(兼容WebKit写法)
                    100%{-webkit-transform:rotate(360deg)}
                }
                @keyframes rotate{//兼容w3c写法
                    100%{
                        transform:rotate(360deg);
                    -webkit-transform: rotate(360deg);
                    }
                }
                @-webkit-keyframes zoom{//定义缩放动画(兼容WebKit写法)
                    0%,100%{-webkit-transform:scale(0.0)}
                    50%{-webkit-transform:scale(1.0)}
                }
                @keyframes zoom{//兼容W3C写法
                    0%,100%{
                        transform:scale(0.0);
                        -webkit-transform:scale(0.0);
                    }
                    50%{
                        transform:scale(1.0);
                        -webkit-transform:scale(1.0);
                    } 
                }
            </style>
        </head>
        <body>
            <div class="spiner">
                <div class="dot1"></div>
                <div class="dot2"></div>
            </div>
        </body>
    </html>

    效果为:

    其中,动画的运动速度是参数:

    transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-

    是不是很明了,记录一下,go on,fighting!
  • 相关阅读:
    平时工作需要用到的adb命令(二)
    计算Android总的内存使用率、CPU使用率和CPU实时主频率
    使用ADB命令写Android自动化测试脚本
    adb常见命令
    Jmeter的安装配置
    SQL Server优化之SQL语句优化
    单例模式——懒汉模式,饿汉模式
    GIT和SVN的区别(面试)
    python zipfile文件名乱码问题
    企业微信给用户发送消息
  • 原文地址:https://www.cnblogs.com/gruguy/p/4065690.html
Copyright © 2011-2022 走看看