Css3动画.md

Css3可以实现动画,代替原来的Flash和JavaScript方案。
首先,使用 @keyframes定义一个动画,名称为testAnimation,代码如下,通过百分比设置不同的CSS样式,规定动画的变化。

@keyframes myanimation  {
0% {background:red,top:0,left:0}
25% {background:green,top:0,left:200px}
50% {background:blue,top:200px;left:200px}
75% {background:yellow,top:200px;left:0}
100% {background:red;top:0;left:0}
}

然后,通过选取一个元素,设置动画,以div为例

div {
   width: 100px;
   heihgt: 50px;
   position: absolute;

    animation-name: myanimation;  //动画名称
    animation-duration: 5s;   //动画持续时间
    animation-timing-function: ease  // 动画运动曲线函数
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,816评论 1 45
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,812评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,346评论 0 11
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 3,740评论 1 13
  • 蘑菇怎么吃法呢? 嘻嘻,我最喜欢蘑菇汤,小时候看的童话故事里总是有采蘑菇,唱的歌里也有。可是,蘑菇到底是怎么样的呢...
    古玉杰阅读 1,274评论 0 1