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!

转载于:https://www.cnblogs.com/mrjungle-home/p/4065690.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值