<!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. 看完这篇让你对各种前端build工具不再懵逼！

    本文原标题为:我终于弄懂了各种前端build工具 译者:@Christian 译文:https://www.sdk.cn/news/5412 原文:https://medium.freecodecam ...

  2. 聊聊 Apache 开源协议

    摘要 用一句话概括 Apache License 就是,你可以用这代码,但是如果开源你必须保留我写的声明:你可以改我的代码,但是如果开源你必须写清楚你改了哪些:你可以加新的协议要求,但不能与我所 公布 ...

  3. Javascript字节转换

    //文件大小转换 function bytesToSize(bytes) { if (bytes === 0) return '0 B'; var k = 1024; sizes = ['B', 'K ...

  4. 安装Windows10,Ubuntu双系统14.04LTS记录

    参考链接:http://www.jianshu.com/p/2eebd6ad284d(推荐直接看这个链接,我也是看这篇博客装的)然后自己记录一下,防止以后找不到了 本记录是在Windows10 上安装 ...

  5. Day5-python基础之函数（二）

    生成器 迭代器 装饰器 模块   来个需求,一个列表中所有元素都+1 1.最容易想到的方法 for循环,找列表索引,对应每个值+1 list_old = [1,2,3,4,5,6,7,8,9] for ...

  6. js 对象的_proto_

    js 对象呢,有个属性叫_proto_,以前没听说过,也没关注,最近看这个原型,就被迫知道了这个东西,js 这里面的东西,真是规定的很奇怪,具体为啥也不知道,就测试发现的,对象的_proto_属性,和 ...

  7. pageX、clientX、screenX、offsetX、layerX、x

    参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX--相对整个页面的坐标e.layerX-- ...

  8. coreseek安装过程

    一.sphinx 全文检索 通过sphinx检索到id,然后到mysql里面拿到记录 什么是劝我呢检索?结构化数据: 具有固定格式或者长度的数据非结构化数据: 标题 内容 等不定长的数据非机构化数据还 ...

  9. dom 的介绍

    直接上干货 ...网址在此,,,,, <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object ...

  10. Java虚拟机及运行时数据区

    1.Java虚拟机的定义 Java虚拟机(Java Virtual Machine),简称JVM.当我们说起Java虚拟机时,可能指的是如下三种不同的东西: 抽象的虚拟机规范 规范的具体实现 一个运行 ...