css3 animation 动画

最新推荐文章于 2022-11-25 14:52:08 发布

homandjing

最新推荐文章于 2022-11-25 14:52:08 发布

阅读量117

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/homandjing/article/details/84016969

css3 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用CSS3的animation属性创建动画效果。通过一个旋转动画的例子详细展示了animation的基本语法及关键帧的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

闲着没事儿研究了一下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