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. redis使用总结(一)(redis客户端使用)

    NoSQL 摘自百度百科 NoSQL,泛指非关系型的数据库.随着互联网web2.0网站的兴起,传统的关系数据库在应付web2.0网站,特别是超大规模和高并发的SNS类型的web2.0纯动态网站已经显得 ...

  2. 移动端与pc端如何用localStorage实现历史纪录？

    1.使用jq完成localStorage实现历史纪录版. 代码如下: <!DOCTYPE html> <html> <head lang="en"&g ...

  3. Windows 下安装 Memcached

    Windows 下安装 Memcached 官网上并未提供 Memcached 的 Windows 平台安装包,我们可以使用以下链接来下载,你需要根据自己的系统平台及需要的版本号点击对应的链接下载即可 ...

  4. Spark大型电商项目实战-及其改良(3) 分析sparkSQL语句的性能影响

    之前的运行数据被清除了,只能再运行一次,对比一下sparkSQL语句的影响 纯SQL的时间 对应时间表 th:first-child,.table-bordered tbody:first-child ...

  5. 18B20驱动小经验

    在写命令时P14拉高在最后 在读命令时P14在拉低后拉高

  6. php登录注册

    php 登录注册 注册代码:register.php <style type="text/css"> form{ width:300px; background-col ...

  7. 异常处理与网络基础中的tcp,udp协议

    # 异常处理: # 什么是异常?异常和错误的区别 # Error 语法错误 比较明显的错误 在编译代码阶段就能检测出来 # Iteration 异常 在执行代码的过程中引发的异常 # 异常发生之后的效 ...

  8. IDEA调用其它模块module的类方法

    IDEA支持调用本project中其他模块的包里面的方法(需要配置该模块和src同级的.iml文件,配置完需要等一会才生效,尝试切换到桌面以...) 这样会使IDEA的project的模块间有依赖,该 ...

  9. MySql中not in的优化

    最近项目上用select查询时使用到了not in来排除用不到的主键id一开始使用的sql如下: select s.SORT_ID, s.SORT_NAME, s.SORT_STATUS, s.SOR ...

  10. centos7——mysql5.7忘记root密码的处理方式

    参考资料:https://www.cnblogs.com/nangch/p/5521193.html 解决方法: 一.通过编辑/etc/my.cnf文件在[mysqld]下面加上skip-grant- ...