<!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>css-keyframes</title>

 <link href="style.css" rel="stylesheet" type="text/css">

 </head>

 <body>

 <div><span></span></div>

 </body>

 </html>
 @-webkit-keyframes move{    /*定义名为move的动画函数 目前chrome对其支持较好 所以加-webkit-前缀*/

   0%{                       /*时间达到0%时坐标位置为（0,0）*/

     transform:translate(0px,0px);/*应用该动画的标签位置为（0,0）*/

   }

   20%{

     transform:translate(100px,80px);

   }

   50%{

     transform:translate(200px,0px);

   }

   100%{

     transform:translate(400px,80px);

   }

 }

 div {

   width: 300px;

   height: 100px;

   background: blue;

   border:1px solid red;

   margin: 20px 100px;

 }

 span{

   display:inline-block;

   width:20px;

   height:20px;

   border-radius:10px;

   background:yellow;

   -webkit-animation-name:move;/*调用move动画*/

   -webkit-animation-duration:10s;/*move动画从0%到100%的用时，单位为s*/

   -webkit-animation-timing-function:ease;/*表示动画播放方式 ease（速度由快到慢）linear（恒定速度）ease-in(加速变化

 ) ease-out(减速变化) ease-in-out(先加速在减速)*/

   -webkit-animation-direction:normal;/*表示动画播放方向  normal（默认从0%到100%） alternate(偶数次从0%到100%，基数

 次100%到0%)*/

   -webkit-animation-delay:2s;/*动画延时2秒播放*/

   -webkit-animation-iteration-count:infinite;/*动画播放的次数  infinite表示无限次*/

   -webkit-animation-play-state:running;/*播放还是paused*/

   -webkit-animation-fill-mode:none;/*定义动画开始之前和结束之后发生的操作 none（动画结束时返回第一帧） forwards(动

 画结束后显示最后一帧) backwards（元素应用动画样式时迅速应用动画的第一帧） both（元素动画同时具有forwards和

 backwards效果）*/

 }

css keyframes动画属性设置的更多相关文章

  1. UIView转场动画属性设置

    常规动画属性设置(可以同时选择多个进行设置) UIViewAnimationOptionLayoutSubviews:动画过程中保证子视图跟随运动. UIViewAnimationOptionAllo ...

  2. css动画属性--轮播图效果

    通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...

  3. CSS波纹动画

    波纹动画 在此运用到css的动画属性,以及背景等相关属性. 值得一说的是下面代码中一直写到的这样一行代码:filter: alpha(opacity=0~100) ,这是考虑到浏览器兼容的问题. IE ...

  4. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  5. 容易忘记的css属性和动画属性

    动画属性 @keyframes 关键帧 --> animation 活泼 (配合使用) transform 变换 --> transition 过渡 (配合使用) 1.animation ...

  6. css中animation和@keyframes 动画

    Animation 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infi ...

  7. CSS选择器，属性前缀，长度单位，变形效果，过渡效果，动画效果

    CSS3选择器 ·*通配选择器 ·E标签选择器 ·E#id ID选择器 ·E.class类选择器 ·E F包含选择器,后代选择器 ·E>F子包含选择器 ·E+F相邻兄弟选择器 ·E[foo]属性 ...

  8. CSS动画属性性能详细介绍

    CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐 ...

  9. css @keyframes属性 语法

    css @keyframes属性 语法 @keyframes是什么?直线电机生产厂家 @keyframes是CSS的一种规则,可以用来定义CSS动画的一个周期的行为,创建简单的动画. 作用:通过 @k ...

随机推荐

  1. jquery.on()超级方法

    $.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件.使用起来很方便. demo传送门 事件委托 首先说一下事件委托 ...

  2. js 正则表达式 ( 1 )

    https://regexper.com/ 量词: ?: 最多一次(0次或者1次) +:至少一次(大于等于1次) *:大于等于0次 {n}:n次 {n,m}:n次到m次之间,包括n,m {n,}:n次 ...

  3. POJ 2253 Frogger（Dijkstra)

    传送门 Frogger Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 39453   Accepted: 12691 Des ...

  4. Linux 下 ---ThinkPHP 图片上传提示：上传根目录不存在！请尝试手动创建

    2016年11月15日11:15:47 Windows下如果碰到如此问题,要看文件保存根路径里的rootpath,比如ThinkPHP框架里config.php文件里的的参数配置: //文件上传相关配 ...

  5. NOIp 11.11/12

    最后一场比较正式的NOIp模拟赛,写一发小总结.题目没什么好说的,大部分很简单,先贴一下代码. 1111 T1 //string //by Cydiater //2016.11.11 #include ...

  6. HDU 4081Qin Shi Huang's National Road System（次小生成树）

    题目大意: 有n个城市,秦始皇要修用n-1条路把它们连起来,要求从任一点出发,都可以到达其它的任意点.秦始皇希望这所有n-1条路长度之和最短.然后徐福突然有冒出来,说是他有魔法,可以不用人力.财力就变 ...

  7. hibernate优化笔记(随时更新)

    一:优化配置 1.关联映射的配置:对照之前的博客,如:inverse属性的设置(减少对同一对象的多条update语句):在one端设置为true,只会执行一次update语句 2.级联cascade属 ...

  8. input file限制上传文件类型

    http://www.cnblogs.com/haocool/p/3431181.html http://www.haorooms.com/post/input_file_leixing http:/ ...

  9. IScroll5兼容IE修改

    水平不到家,无法像js大神那样讲得头头是道.仅做记录,以备后查. iScroll5是不兼容IE低版本的.为兼容IE低版本(以IE8为例),需做以下工作: 1.事件绑定方式兼容 众所周知,独特的IE有它 ...

  10. bootstrap学习笔记--bootstrap布局方式

    Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备.平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑.台式电脑)上的组件和网格. 移动设备优 ...