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. java线程学习之notify方法和notifyAll方法

    notify(通知)方法,会将等待队列中的一个线程取出.比如obj.notify();那么obj的等待队列中就会有一个线程选中并且唤醒,然后被唤醒的队列就会退出等待队列.活跃线程调用等待队列中的线程时 ...

  2. vmware-tools安装——实用

    1.vmware中点击安装或重新安装vmware-tools 2.在root终端解压并移动安装文件:tar -xvf VMwareTools-9.9.0-2304977.tar.gz -C /tmp ...

  3. centos6删除mysql安装

    1.查看已经安装了的mysql包: 2.卸载mysql: 3.查看剩下的mysql安装包: 4.逐个删除剩下的mysql安装包: 5.删除完后再次查看,以确保已删除干净: 6.删除自己安装的mysql ...

  4. Transparent PageRoute in Flutter for displaying a (semi-) transparent page

    import 'package:flutter/widgets.dart'; class TransparentRoute extends PageRoute<void> { Transp ...

  5. springboot-yml内list、map组合写法

    yml:myProps: varmaplist: key11: - t1 - t2 - t3 key22: - t11 - t22 - t33 list: - topic1 - topic2 - to ...

  6. Parhaps you are running on a JRE rather than a JDK?

    maven项目启动时报错 解决方案: 第一步:在启动项目上右击 第二步:修改JRE为JDK,双击划线部分 第三步:如果没有配置JDK,进行以下操作 第四步:从本地添加JDK 第五步:应用JDK 选择好 ...

  7. android架构原理

    应用层(与用户打交道) 应用架构层(常用的组件和服务) 系统运行层(Android运行环境+原生c/c++库) Linux核心层(linux内核+硬件抽象层)

  8. Python模块 2

    collections模块 在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型: 1.namedtuple: 生成可以使用名字来访问 ...

  9. linux下的nmap工具能干什么?

    答:可以用来探测远程主机的操作系统类型,使用方法如下: nmap -A <ip address>

  10. kubernetes1.13.5安装部署

    Kubernetes 一.    Kubernetes介绍 各节点所需组件 Master:docker,kubeadm,kubelet, 组件 版本 备注 Kubelet 1.13.5 组件 Kube ...