例:

-webkit-animation: myfirst 5s linear 2s infinite alternate;
animation: myfirst 5s linear 2s infinite alternate; @keyframes myfirst{
  from{background:red;}
  to{background:yellow;}
}
@-webkit-keyframes myfirst{
  frome{background:red;}
  to{background:yellow;}
}
//或者
@keyframes myfirst{
  0%{ }
  25%{ }
  50%{ }
  100%{ }
}

参数及含义:

animation-name: 动画的名字

animation-duration: 动画完成一个周期所花费的秒数,默认是0

animation-timing-function: 规定动画的速度曲线,默认是ease(动画以低速开始,然后加块,在结束前变慢);

              linear(动画从头到尾的速度是相同的)

              ease-in(动画以低速开始)

              ease-out(动画以低速结束)

              ease-in-out(动画以低速开始和结束)

animation-delay: 规定动画何时开始,默认是0;

animation-iteration-count: 规定动画被播放的次数,默认是1, infinite(无限循环)

animation-direction: 规定动画是否在下一周期逆向地播放,默认是normal(不逆向播放)

            reverse(动画反向播放)

            alternate(动画在奇数1,3,5、、、正向播放,在偶数2,4,5、、、反向播放) 

            alternate-reverse(动画在奇数次1,3,4、、、反向播放,在偶数次2,4,6、、、正向播放) 

css3动画:animation的更多相关文章

  1. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  2. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

  3. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  4. CSS3 动画 animation和@keyframes

    CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...

  5. CSS3动画animation认识,animate.css的使用

    CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...

  6. css3动画animation

    动画:animation   animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...

  7. CSS3 动画Animation的8大属性

    animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...

  8. css3动画-animation

    animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...

  9. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  10. CSS3动画详解(结合实例)

    一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...

随机推荐

  1. configured to save RDB snapshots, but is currently not able to persist o...

    Redis问题 MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on d ...

  2. [转]script之defer&async

    html5中script的async属性 我兴奋于html5的原因之一是一些久久未能实现的特性现在可以真正运用于实际项目中了. 如我们使用placeholder效果蛮久了但是那需要javascript ...

  3. CF285 E Positions in Permutations——“恰好->大于”的容斥和允许“随意放”的dp

    题目:http://codeforces.com/contest/285/problem/E 是2018.7.31的一场考试的题,当时没做出来. 题解:http://www.cnblogs.com/y ...

  4. Pokemon Master

    Pokemon Master Time Limit : 4000/2000ms (Java/Other) Memory Limit : 131072/65536K (Java/Other) Total ...

  5. WPF学习笔记系列之一 (布局详情)

    布局:StackPanel  栈布局:控件不会拐弯且多出的不再显示.DockPanel   停靠布局 吸在上边下边或左右.WrapPanel    环绕布局   一行控件会拐弯Canvas  进行基于 ...

  6. CF-851B

    B. Arpa and an exam about geometry time limit per test 2 seconds memory limit per test 256 megabytes ...

  7. Hibernate注解详细介绍

    引自http://blog.csdn.net/lin_yongrui/article/details/6855394 声明实体Bean      @Entity   public class Flig ...

  8. DOM,date,字符串

    ECMAscript Dom doc Bom Browerwindow --窗口. location --地址栏. history --历史. document --文档. statue --任务栏& ...

  9. tcpdump的使用总结

    1. 监视所有发送到主机hostname的数据: tcpdump -i eth0 dst host hostname 2. 监视指定主机和端口的数据包(接收或发出的telnet包): tcpdump ...

  10. 教妹学 Java:晦涩难懂的泛型

    00.故事的起源 “二哥,要不我上大学的时候也学习编程吧?”有一天,三妹突发奇想地问我. “你确定要做一名程序媛吗?” “我觉得女生做程序员,有着天大的优势,尤其是我这种长相甜美的.”三妹开始认真了起 ...