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. Dataframe 多行合并为一行

    原表数据: 最后4行合并为1行: def ab(df): return','.join(df.values) df = df.groupby(['股票代码','股票简称'])['所属概念'].appl ...

  2. bzoj 1283 序列 - 费用流

    题目传送门 传送门 题目大意 给定一个长度为$n$的序列,要求选出一些数使得原序列中每$m$个连续的数中不超过$K$个被选走.问最大的可能的和. 感觉建图好妙啊.. 考虑把问题转化成选$m$次数,每次 ...

  3. Python3 tkinter基础 Radiobutton 设置相同的value值，产生连锁效果

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  4. 信息安全之路-web-xss学习(2)

    存储型xss漏洞 该漏洞会将执行命令写入数据库,每一个用户在该页面停留时,都会被动执行该js命令,从而被盗取cookie 1.DVWA平台验证-low等级 <?php if( isset( $_ ...

  5. Lintcode228-Middle of Linked List-Naive

    228. Middle of Linked List Find the middle node of a linked list. Example Example 1: Input: 1->2- ...

  6. Microsoft.AspNet.Web.Optimization.Bundle的完美替换方案

    Web应用程序中包含大量的样式(css)和脚本(js)文件,这些文件的引用.管理和发布有很多解决方案.在Asp.Net MVC应用程序中,大家最熟悉的解决方案应属Microsoft.AspNet.We ...

  7. oracle 11g RAC日志分布

    oracle 下的alert日志$ORACLE_BASE/diag/rdbms/orcl/orcl1/trace/alertorcl1.log grid 下的 alert 日志 $ORACLE_HOM ...

  8. 使用VSCode调试Jest

    0. 环境 Node版本:8.12.0 操作系统:windows10 1. 配置launch.json { "version": "0.2.0", " ...

  9. Vue-admin工作整理（十）： Vuex-Actions(模拟接口请求实现组件字段更新)

    思路:通过提交一个 mutation,而不是直接变更状态,它可以包括异步操作,通过请求接口,定义一个方法,第一个参数为对象,在里面能够提取到一些东西,比如:commit,这是一个方法,调用这个comm ...

  10. os.remove异常处理

    这种情况,正反斜杠都没问题.(windows环境下) 这种情况会出现下列异常 对于目录的形式,把反斜杠改成正斜杠就好了