<!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. 【BZOJ 4579】【Usaco2016 Open】Closing the Farm

    http://www.lydsy.com/JudgeOnline/problem.php?id=4579 把时间倒过来,只是加点,并查集维护连通块. #include<cstdio> #i ...

  2. Java集合框架List，Map，Set等全面介绍

    Java集合框架的基本接口/类层次结构: java.util.Collection [I]+--java.util.List [I]   +--java.util.ArrayList [C]   +- ...

  3. 动态规划之最长公共子序列(LCS)

    转自:http://segmentfault.com/blog/exploring/ LCS 问题描述 定义: 一个数列 S,如果分别是两个或多个已知数列的子序列,且是所有符合此条件序列中最长的,则 ...

  4. html5定位getLocation()

    HTML5 Geolocation API 用于获得用户的地理位置. 如果用户不允许定位,那么用户信息是不可用的. 获取用户的位置:getCurrentPosition() 返回数据如下 返回用户当前 ...

  5. html5+css+div随时笔记

    首先给头部文件引用格式 <link href="<%=basePath%>temp/public/css/style.css" rel="stylesh ...

  6. Java加载资源文件几种方法

    from: http://andyzhu.blog.51cto.com/4386758/775836/ import java.net.URL; import org.springframework. ...

  7. Ubuntu常用命令之update-alternatives

    maintain symbolic links determining default commands update-alternatives creates, removes, maintains ...

  8. cent6.4使用

    让centos能够上网 刚安装了时,是不能联网的,我们可以通过以下命令更改即可: cd /etc/sysconfig/network-script vi ifcfg-eth0 更改其中的ONBOOT= ...

  9. ios官方菜单项目重点剖析附项目源码

    原版教程:https://developer.apple.com/library/content/referencelibrary/GettingStarted/DevelopiOSAppsSwift ...

  10. Netty源码分析之客户端启动过程

    一.先来看一下客户端示例代码. public class NettyClientTest { public void connect(int port, String host) throws Exc ...