CSS3的@keyframes用法详解:

此属性与animation属性是密切相关的，关于animation属性可以参阅CSS3的animation属性用法详解一章节。

一.基本知识:

keyframes翻译成中文，是"关键帧"的意思，如果用过flash应该对这个比较好理解，当然不会flash也没有任何问题。

使用transition属性也能够实现过渡动画效果，但是略显粗糙，因为不能够更为精细的控制动画过程，比如只能够在指定的时间段内总体控制某一属性的过渡，而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。

语法结构:

@keyframes animationname {keyframes-selector {css-styles;}}

参数解析:

1.animationname:声明动画的名称。

2.keyframes-selector:用来划分动画的时长，可以使用百分比形式，也可以使用 "from" 和 "to"的形式。

"from" 和 "to"的形式等价于 0% 和 100%。

建议始终使用百分比形式。

二.代码实例:

实例一:

复制代码

复制代码

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<title></title>

<meta name="author" content="http://www.softwhy.com/" />

<style type="text/css">

div{

width:100px;

height:100px;

background:red;

position:relative;

animation:theanimation 5s infinite alternate;

-webkit-animation:theanimation 5s infinite alternate ;

-moz-animation:theanimation 5s infinite alternate ;

-o-animation:theanimation 5s infinite alternate ;

-ms-animation:theanimation 5s infinite alternate ;

}

@keyframes theanimation{

from {left:0px;}

to {left:200px;}

}

@-webkit-keyframes theanimation{

from {left:0px;}

to {left:200px;}

}

@-moz-keyframes theanimation{

from {left:0px;}

to {left:200px;}

}

@-o-keyframes theanimation{

from {left:0px;}

to {left:200px;}

}

@-ms-keyframes theanimation{

from {left:0px;}

to {left:200px;}

}

</style>

</head>

<body>

<div></div>

</body>

</html>

复制代码

复制代码

上面代码实现了简单的动画，下面简单做一下分析:

1.使用@keyframes定义了一个名为theanimation的动画。

2.@keyframes声明的动画名称要和animation配合使用。

3.from to等价于0%-100%，所以就是规定5s内做了一件事情。

实例二:

复制代码

复制代码

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title></title>

<style type="text/css">

div{

width:100px;

height:100px;

background:red;

position:relative;

animation:theanimation 4s infinite alternate;

-webkit-animation:theanimation 4s infinite alternate ;

-moz-animation:theanimation 4s infinite alternate ;

-o-animation:theanimation 4s infinite alternate ;

-ms-animation:theanimation 4s infinite alternate ;

}

@keyframes theanimation{

0%{top:0px;left:0px;background:red;}

25%{top:0px;left:100px;background:blue;}

50%{top:100px;left:100px;background:yellow;}

75%{top:100px;left:0px;background:green;}

100%{top:0px;left:0px;background:red;}

}

@-moz-keyframes theanimation{

0% {top:0px;left:0px;background:red;}

25%{top:0px;left:100px;background:blue;}

50%{top:100px;left:100px;background:yellow;}

75%{top:100px;left:0px;background:green;}

100%{top:0px;left:0px;background:red;}

}

@-webkit-keyframes theanimation{

0%{top:0px;left:0px;background:red;}

25%{top:0px;left:100px;background:blue;}

50%{top:100px;left:100px;background:yellow;}

75%{top:100px;left:0px;background:green;}

100%{top:0px;left:0px;background:red;}

}

@-o-keyframes theanimation{

0%{top:0px;left:0px;background:red;}

25%{top:0px;left:100px;background:blue;}

50%{top:100px;left:100px;background:yellow;}

75%{top:100px;left:0px;background:green;}

100%{top:0px;left:0px;background:red;}

}

</style>

</head>

<body>

<div></div>

</body>

</html>

跟随我在oracle学习php（14）的更多相关文章

  1. Oracle 学习笔记 14 -- 集合操作和高级子查询

    Oracel提供了三种类型的集合操作:各自是并(UNION) .交(INTERSECT). 差(MINUS) UNION :将多个操作的结果合并到一个查询结果中,返回查询结果的并集,自己主动去掉反复的 ...

  2. 跟随我在oracle学习php（19）

    Order by子句 形式: order  by  排序字段1  [排序方式],  排序字段2  [排序方式], ..... 说明: 对前面取得的数据(含from子句,where子句,group子句, ...

  3. 跟随我在oracle学习php（18）

    修改表: 一般概述 通常,创建一个表,能搞定(做到)的事情,修改表也能做到.大体来说,就可以做到: 增删改字段: 增:alter  table  表名  add  [column]  字段名  字段类 ...

  4. 跟随我在oracle学习php（17）

    通用设定形式 定义一个字段的时候的类型的写法. 比如: create  table  tab1  (f1  数据类型 ); 数据类型: 类型名[(长度n)]  [unsigned]  [zerofil ...

  5. 跟随我在oracle学习php（16）

    数据库的增删改查 增:create  database  [if  not  exists ] 数据库名  [charset  字符集]  [collate  字符排序规则]: 说明: 1,if  n ...

  6. 跟随我在oracle学习php（15）

    开发环境 独立开发环境:组成 Windows/Linux php Apache MySQL 集成开发环境:phpstudy wamp xammp 关系数据库: SQL: Struct Query La ...

  7. 跟随我在oracle学习php（13）

    常用的css样式 [class~="col-6"]:选择我所有类名中包含有col-6独立单词的元素 [class*="col-"]:选择所有类名中含有" ...

  8. 跟随我在oracle学习php（12）

    DOM 文档对象模型 body:(什么时候)找到标签 操作标签找到标签:(都会返回一个js对象)document.getElementById() 通过iddocument.getElementsBy ...

  9. 跟随我在oracle学习php（11）

    数组专题 数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9]; for ( var i = 0; i <arr.length; i++){ consol ...

随机推荐

  1. HBase根据Rowkey批量查询数据JAVA API(一次查多条，返回多个记录)

    最近在生产中遇到了一个需求,前台给我多个rowkey的List,要在hbase中查询多个记录(返回给前台list).在网上也查了很多,不过自己都不太满意,filter的功能有可能查询结果不是准确值,而 ...

  2. JsTree 最详细教程及完整实例

    JsTree是一个jquery的插件,它提交一个非常友好并且强大的交互性的树,并且是完全免费或开源的(MIT 许可).Jstree技持Html 或 json格式的的数据, 或者是ajax方式的动态请求 ...

  3. （转）A Recipe for Training Neural Networks

    A Recipe for Training Neural Networks Andrej Karpathy blog  2019-04-27 09:37:05 This blog is copied ...

  4. leetcode实战

    leetcode记录 两数之和 题目 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案. ...

  5. python2 与 python3的区别

    python2 与 python3的区别 几乎所有的python2程序都需要一些修改才能正常的运行在python3的环境下.为了简化这个转换过程,Python3自带了一个2to3的实用脚本.这个脚本会 ...

  6. 數據監控与診斷－－環形緩沖區(RING BUFFER)

    1.  環形緩沖區 動態管理視圖: sys.dm_os_ring_buffers 查看ring_buffers: Select distinct ring_buffer_type from sys.d ...

  7. wireshark基础学习—第三部分wireshark的过滤器语法

    我们都知道,wireshark可以实现本地抓包,同时Wireshark也支持remote packet capture protocol(rpcapd)协议远程抓包,只要在远程主机上安装相应的rpca ...

  8. vue--mixins

    混入(mixins) 是一种分发Vue 组件中可复用功能的非常灵活的方式 mixins主要用在以下两个方面: 当做完一个项目,想好好放松的时候,突然有新需求 为了不污染完美的构造函数,在构造函数外面定 ...

  9. NetSec2019 20165327 Exp2 后门原理与实践

    NetSec2019 20165327 Exp2 后门原理与实践 快速找到重点: (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用socat获取主机操作Shell, ...

  10. Android系统下app测试功能点

    一.安装卸载 1.验证app能否正常的安装启动运行,安装后的文件夹及文件是否写到了指定的目录里,卸载后相关文件是否清除 2.软件安装/卸载过程中意外情况的处理是否符合需求(如死机,重启,断电) 3.安 ...