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. js 对url进行某个参数的删除，并返回url

    两种情况 1对当前页面的url进行操作 function funcUrlDel(name){ var loca = window.location; var baseUrl = loca.origin ...

  2. OpenCV自带dnn的Example研究（1）— classification

    这个博客系列,简单来说,今天我们就是要研究 https://docs.opencv.org/master/examples.html下的 6个文件,看看在最新的OpenCV中,它们是如何发挥作用的. ...

  3. 机器学习总结（八）决策树ID3，C4.5算法，CART算法

    本文主要总结决策树中的ID3,C4.5和CART算法,各种算法的特点,并对比了各种算法的不同点. 决策树:是一种基本的分类和回归方法.在分类问题中,是基于特征对实例进行分类.既可以认为是if-then ...

  4. Redis 集群版

    1.# yum install ruby -y 1.1 后面需要用到ruby脚本 2.# yum install rubygems -y 1.1 安装ruby包管理器 3.# gem install ...

  5. 20165306 Exp6 信息搜集与漏洞扫描

    Exp6 信息搜集与漏洞扫描 一.实践内容概述 1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应用 搜索网址目录结构 搜索特定类型的文件 搜索E-Ma ...

  6. Vue-admin工作整理（五）：守卫导航

    一.作用: 它可以帮我们在路由发生跳转,到导航结束的时间内,做一些相应的逻辑处理,分为:全局守卫,和专项守卫 1.全局收尾: (a).前置守卫:router.beforeEach(to,from,ne ...

  7. vue全局组件-父子组件传值

    全局组件注册方式:Vue.component(组件名,{方法}) demo: 子组件:upload.vue <template> <div > <div class=&q ...

  8. expect免互交 常用编辑文本

    expect免互交 yum -y install expect cat ip_pass.txt #这里写上要执行的IP地址和root用户密码 cat ssh2.exp #编写要执行的操作 #!/usr ...

  9. 关于spark写入文件至文件系统并制定文件名之自定义outputFormat

    引言: spark项目中通常我们需要将我们处理之后数据保存到文件中,比如将处理之后的RDD保存到hdfs上指定的目录中,亦或是保存在本地 spark保存文件: 1.rdd.saveAsTextFile ...

  10. Creed_颓知乎

    题目背景 二轮省选前的一个最后周,Creed_还在颓知乎. 突然,她看到一个有趣的回答. 紧接着,Creed_点开了评论区,又看到了一个有趣的评论. Creed_想了一下,发现自己并不会,于是她又顺着 ...