css3 animation 动画

最新推荐文章于 2015-09-27 10:29:13 发布

homandjing

最新推荐文章于 2015-09-27 10:29:13 发布

阅读量98

点赞数

分类专栏： css3 文章标签： css3 动画

本文链接：https://blog.csdn.net/homandjing/article/details/84016969

版权

css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

闲着没事儿研究了一下CSS3 animation。看了看别人写的东西，可惜的是目前还是只能在Chrom下面使用。

animation的语法也比较简单：

#moonobt{ position:absolute; left:0; top:475px; height:50px; width:800px;
-webkit-animation-name: mobt; /* 指定动画名称*/
-webkit-animation-duration: 30s; /*指定动画运行时间*/
-webkit-animation-iteration-count: infinite;/*运行次数*/
-webkit-animation-timing-function: linear;
}

@-webkit-keyframes mobt
{
    from { /*关键帧设置 从 frome 到 to*/
        -webkit-transform:rotate(0deg);
    }
    50% { /*中间百分之几十在哪儿 什么状态 可以添加多个*/
        -webkit-transform:rotate(-180deg);
    }
    to { /*一个周期的最终状态*/
        -webkit-transform:rotate(-360deg);
    }
}

演示效果： http://qsl.cn/ztm/kikx/animate/animatetest.html

转载自： http://www.cnblogs.com/trance/archive/2011/08/23/2151102.html