<!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. Less的使用

    Less为css预处理器 首先先去下载一个koala编译器软件,然后运行打开 新建一个项目目录,在css文件夹中新建一个后缀为less的文件,然后拉入koala软件中,然后运行 ,你的css文件夹中就 ...

  2. python学习之路 第二天

    1.import 导入模块 #!/usr/bin/python # -*- coding:utf-8 -*- import sys print(sys.argv) 2.字符串常用方法: 移除空白: s ...

  3. 佛祖保佑 永无bug

    /* _ooOoo_ o8888888o 88" . "88 (| -_- |) O\ = /O ____/`---'\____ .' \\| |// `. / \\||| : | ...

  4. idea 如何隐藏/展示不想看到的文件

    隐藏:在 Ignore files and folders中添加想要过滤的文件或文件夹名称 展示隐藏文件: 在过滤列表中删除掉文件或者文件夹就好了

  5. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  6. cx_Oracle摘记

    由于想使用python操作oracle所以查看了cx_Oracle的官方文档,同时也查看了twisted中cx_Oracle的使用.下面是摘自文档中一些我认为有用的内容 cx_Oracle is a ...

  7. Android系统全貌 (转)

    转自Gityuan的Android开篇,对自我学习作进一步整理. Android系统以Linux内核作为基底,上层采用Native层和Java层.系统分为内核空间和用户空间,并通过系统调用(Sysca ...

  8. BZOJ 4742: [Usaco2016 Dec]Team Building

    4742: [Usaco2016 Dec]Team Building Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 21  Solved: 16[Su ...

  9. MYSQL远程登录权限设置 ，可以让Navicat远程连接服务器的数据库

    Mysql默认关闭远程登录权限,如下操作允许用户在任意地点登录: 1. 进入mysql,GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY ...

  10. win10 右键菜单添加Git Hash Here

    1.通过在"运行"中输入'regedit',打开注册表. 2.找到[HKEY_CLASSES_ROOT\Directory\Background]. 3.在[Background] ...