例:

-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. Linux系统上php-cli安装redis扩展

    下载 假设已经安装了redis-server,现在我们来安装redis扩展. 下载ZIP包: https://github.com/phpredis/phpredis/tree/master . 解压 ...

  2. eval解析字符串问题

    eval(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句. 复制代码 var str = '{"name&quo ...

  3. select2的远程加载非分页实例

    $("#c01-select").select2({ ajax: { url: "data.json", dataType: 'json', delay: 25 ...

  4. HDU - 6081 2017百度之星资格赛 度度熊的王国战略

    度度熊的王国战略  Accepts: 644  Submissions: 5880  Time Limit: 40000/20000 MS (Java/Others)  Memory Limit: 3 ...

  5. GridView_RowDataBound 常用方法

    1.这个就不用说,鼠标经过行颜色变化 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)    { ...

  6. Git查询

    Git查询 查询分支 git branch # 查询本地分支 git branch -a # 查询所有分支 $ git branch -a * master remotes/origin/HEAD - ...

  7. FZU 2219【贪心】

    思路: 因为工人造完一个房子就死了,所以如果m<n则还需要n-m个工人. 最优的方案应该是耗时长的房子应该尽快建,而且最优的是越多的房子在建越好,也就是如果当前人数不到n,只派一个人去分裂. 解 ...

  8. js 常用排序

    1. 冒泡排序 原理:从第一个元素开始,把当前元素和下一个索引元素进行比较.如果当前元素大,那么就交换位置,重复操作直到比较到最后一个元素 function bubbleSort(arr) { if ...

  9. poj 3417 Network(tarjan lca)

    poj 3417 Network(tarjan lca) 先给出一棵无根树,然后下面再给出m条边,把这m条边连上,然后每次你能毁掉两条边,规定一条是树边,一条是新边,问有多少种方案能使树断裂. 我们设 ...

  10. floyd判环算法(龟兔赛跑算法)

    floyd判环算法(龟兔赛跑算法) 注意,这个算法是用来判断一条链+一条环的图,环的长度或者环与链的交界处的,所以此floyd非彼floyd(虽然都是一个人想出来的). (图不是我的) 如果只要求环的 ...