css3系列之animation
在上次博文中已经讲了transition，其实animation与transition功能相同，都是通过改变元素
的属性来实现动画效果的。但是它们也有区别：transition是只能通过改变指定属性的开始值
与结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果。animation却可以通
过定义多个关键帧以及每个关键帧中元素的属性值来实现更为复杂的动画效果。
语法
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 |
| animation-name | 规定需要绑定到选择器的 keyframe 名称。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。（infinite无限轮播） |
| animation-direction | 规定是否应该轮流反向播放动画。 |
有理论不实践，那是纸上谈兵。下面让我们动手写一个简单的示例吧。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> animation </title>
<style type="text/css">
/**/
div {margin:20px 0;}
#animate_1 {position:absolute; background-color:red;top:100px;width:500px;}
@-webkit-keyframes mycolor {
0% {
background-color:red;
}
40% {
background-color:darkblue;
}
70% {
background-color:yellow;
}
100% {
background-color:red;
} }
#animate_1:hover{
-webkit-animation: mycolor 5s linear infinite
} </style>
</head>
<body>
<div id="animate_1">animation_1</div>
</body>
</html>
看到了吧，上面的背景色变换，只需要通过animation的几个关键帧来实现动画的效果
当然animation可以同时改变多个属性值来实现比较复杂的动画效果。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> animation </title>
<style type="text/css">
/**/
div {margin:20px 0;}
#animate_1 {position:absolute; background-color:red;top:100px;width:500px;}
@-webkit-keyframes mycolor {
0% {
background-color:red;
-webkit-transform: rotate(0deg);
}
40% {
background-color:darkblue;
-webkit-transform: rotate(30deg);
}
70% {
background-color:yellow;
-webkit-transform: rotate(-30deg);
}
100% {
background-color:red;
-webkit-transform:rotate(0deg);
} }
#animate_1:hover{
-webkit-animation: mycolor 5s linear infinite
} </style>
</head>
<body>
<div id="animate_1">animation_1</div>
</body>
</html>
效果是不是很酷，只要通过css就可以实现背景变色及元素变换角度。在过去那是实现这个效果
可就疯狂的写一大堆的javascript代码了。
下面说下实现动画的方法
animation-timing-function 规定动画的速度曲线。
语法
animation-timing-function: value;
| 值 | 描述 |
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| 动画以低速开始。 | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(n,n,n,n) |
在 cubic-bezier 函数中设置自己的值。可能的值是从 0 到 1 的数值。 |
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> animation </title>
<style type="text/css">
/**/
div {margin:20px 0;}
@-webkit-keyframes myanimate_2 {
0% {
width:100px;
height:100px;
}
100% {
width:500px;
height:500px;
}
}
#animate_2 {
width:500px;
height:500px;
background-color:red;
-webkit-animation:myanimate_2 5s ease-out;
} @-webkit-keyframes fadein {
0% {
opacity:0;
background-color:white;
}
100% {
opacity:1;
background-color:white;
}
}
</style>
</head>
<body>
<div id="animate_2">animation_2</div>
</body>
</html>
最后一个例子实现一个网站经常用到的动画效果--网页的淡入效果。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> animation </title>
<style type="text/css">
/**/
div {margin:20px 0;} @-webkit-keyframes fadein {
0% {
opacity:0;
background-color:white;
}
100% {
opacity:1;
background-color:white;
}
}
body {
-webkit-animation:fadein 5s linear 1;
}
</style>
</head>
<body>
<div id="animate_1">animation_1</div>
<div id="animate_2">animation_2</div>
</body>
</html>
上面的例子只是一些很基本的动画效果示例。大家对css3的动画效果感兴趣的可以结合我前一次的分享的transition一起实现更加有趣的动画效果。期待大家动手试试吧！
css3系列之animation的更多相关文章
- css3系列教程--animation
Animation:动画animationshi css的动画效果.需要定义keyframe动画对象来实现.为了兼容苹果/chrome,firefox,ie每次定义需要添加-webkit-,-moz- ...
- css3系列之animation实现逐帧动画
上面这个两个简单的动画,是用 animation-timing-function: steps(); 这个属性实现的,具体如何实现,看下面: 这上面的图片,也就是我们的素材, 有些人,可能不是很理解 ...
- css3系列之过渡transition
transition 设置变换属性的过渡效果,举个例子,也就是说, 如果从width100px 变成 width200px,要以什么方式进行变换,速度,时间,类型等. transition trans ...
- CSS3动画属性animation的用法
转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...
- CSS3动画以及animation事件
1.CSS3动画以及animation事件的定义 animation :name duration timing-function delay iteration-count direction an ...
- CSS3系列教程:HSL 和HSL
使用CSS3 HSL声明同样是用来设置颜色的.下一个呢? HSLA? 是的,这个和RGBA的效果是一样的. HSL声明使用色调Hue(H).饱和度Saturation(s)和亮度Lightness(L ...
- css3系列之详解perspective
perspective 简单来说,就是设置这个属性后,那么,就可以模拟出像我们人看电脑上的显示的元素一样.比如说, perspective:800px 意思就是,我在离屏幕800px 的地方观看这 ...
- css3系列之transform详解translate
translate translate这个参数的,是transform 身上的,那么它有什么用呢? 其实他的作用很简单,就是平移,参考自己的位置来平移 translate() translateX() ...
- CSS3(4)---动画(animation)
CSS3(4)---动画(animation) 之前有写过过渡:CSS3(2)--- 过渡(transition) 个人理解两者不同点在于 过渡 只能指定属性的 开始值 与 结束值,然后在这两个属性值 ...
随机推荐
- 【POJ】2373 Dividing the Path（单调队列优化dp）
题目 传送门:QWQ 分析 听说是水题,但还是没想出来. $ dp[i] $为$ [1,i] $的需要的喷头数量. 那么$ dp[i]=min(dp[j])+1 $其中$ j<i $ 这是个$ ...
- php 无限分类
<?php function genTree($items,$id='id',$pid='pid',$son = 'children'){ $tree = array(); $tmpMap = ...
- IDA Pro 权威指南学习笔记(十三) - 基本代码转换
IDA提供的代码转换包括: 1.将数据转换为代码 2.将代码转换为数据 3.指定一个指令序列为函数 4.更改现有函数的起始或结束地址 5.更改指令操作数的显示格式 代码显示选项 通过 Options ...
- 关于Trunk、Hybrid、Access、Tag、Untag、Pvid的关系
一.相关定义 1.Trunk口 Trunk口上可以同时传送多个VLAN的包,一般用于交换机之间的链接. 2.Hybrid口 Hybrid口上可以同时传送多个VLAN的包,一般用于交换机之间的链接或交 ...
- 魔术方法以及__call的调用
一.什么是魔术方法? 魔术方法是php中对一类方法的统称,这些方法可以在任何类中被实现.他们通常可以完成一些特殊的无法纯粹依靠自己编程实现的功能.他们通常以双下划线"__"作为名称 ...
- 浅析Web Services
Web Services 可使您的应用程序成为 Web 应用程序. Web Services 通过 Web 进行发布.查找和使用. 1.什么是Web Services? Web Services 是应 ...
- 29_java之JDBC|SQL注入
01JDBC概念和数据库驱动程序 * A: JDBC概念和数据库驱动程序 * a: JDBC概述 * JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执 ...
- C链表
结构指针的应用,链表处理 1,链表的概念 链表是将若干数据项按一定规则连接起来的[数据类型]表,链表中的每一个数据称为一个节点,既链表是由称为节点的元素组成的,节点多少根据需要确定. 链表连接规则: ...
- powerdesigner 数据库表定义导出到excel
shift+ctrl+X,打开脚本运行,脚本如下:'************************************************************************** ...
- 文件 md5 查看 命令
Windows命令查看文件MD5 certutil -hashfile yourfilename.ext MD5 certutil -hashfile yourfilename.ext SHA1 ...