<!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. HTML之form表单和input系列

    <form method="POST" action="/host"> <input class="c1" type=&q ...

  2. ABP文档 ：Overall - Module System

    模块介绍 ABP提供了构建模块并将这些模块组合起来创建应用的基础设施.一个模块可以依赖另一个模块.一般来说,一个程序集可以认为是一个模块.如果应用中有多个程序集,建议为每个程序集创建一个模块定义.模块 ...

  3. <Script>放置位置

    html文件是自上而下的执行方式 css引入执行加载时,程序仍然往下执行 script脚本是则中断线程,待该script脚本执行结束之后程序才继续往下执行 页面效果实现类的js放在body之前,动作, ...

  4. html页面制作css基本设置

    html{ height: 100%;} *{ margin: 0; padding: 0;}/* tell the browser to render HTML 5 elements as bloc ...

  5. GIT分布式版本控制系统

    Git诞生历史 我想大家还记得Linus torvalds在1991年时发布了Linux操作系统吧,从那以后Linux系统变不断发展壮大,因为Linux系统开源的特性,所以一直接受着来自全球Linux ...

  6. oracle 12c 加入系统服务

    1修改oratab文件 vi /etc/oratab #把后台一行的N改为Y db01:/usr/oracle/app/product/11.2.0/dbhome_1:Y 2如果安装时.bash_pr ...

  7. iOS and JAVA 的 RSA 加密解密 (转载整理 )

    参考原文地址:http://www.cnblogs.com/makemelike/articles/3802518.html (至于RSA的基本原理,大家可以看 阮一峰的网络日志 的 RSA算法原理( ...

  8. IOS开发遇到（null）与<null>轻松处理

    在ios开发中不可避免的我们会遇到服务器返回的值有空值,但是如果是nil也就算了还可能得到(null)以及<null>的返回值,该如何处理呢?(当然有的字典转模型中已处理,可以通过遍历等) ...

  9. Windows 服务的安装（1）

    在上一篇文章中创建了window服务 http://www.cnblogs.com/netqq/p/4182259.html 在本篇中将教会你如何安装这个服务 服务程序的开发和运行环境均为:windo ...

  10. C语言基础(10)-数组

    一.数组的定义 数组就是在内存中连续的相同类型的变量空间. 二.数组在内存中的存储方式 同一个数组所有的成员都是相同的数据类型,同时所有的成员在内存中的地址是连续的,数组名是一个地址的常量,代表数组中 ...