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) 个人理解两者不同点在于 过渡 只能指定属性的 开始值 与 结束值,然后在这两个属性值 ...
随机推荐
- DynamicConverter
folly/DynamicConverter.h When dynamic objects contain data of a known type, it is sometimes useful t ...
- Android：不同drawable文件夹的区别
4.0后,新建android工程,会自动生成drawable,drawalbe-ldpi,drawable-mdpi,drawable-hdpi,drawable-xhdpi,drawable-xxh ...
- JS中的面向对象
创建对象的几种常用方式: 1,使用Object或对象字面量创建对象. 2,工厂模式创建对象. 3,构造函数模式创建对象. 4,原型模式创建对象. 使用Object或对象字面量创建对象: var stu ...
- Monkey Test 命令使用
1. 命令使用 Monkey是一个命令列工具 ,可以运行在仿真器里或实际设备中.它向系统发送伪随机的使用者事件流,实现对正在开发的应用程序进行压力测试.Monkey包括许多选项,它们大致分为四大类: ...
- Newtonsoft.Json[C#]
C# Newtonsoft.Json JsonSerializerSettings配置序列化操作 https://blog.csdn.net/u011127019/article/details/72 ...
- sql developer Oracle 数据库 用户对象下表及表结构的导入导出
Oracle数据库表数据及结构的导入导出 导出的主机与即将导入到的目标主机的tablespace 及用户名需一直!!!!!
- Django-组件--用户认证Auth（auth_user增加字段）
引入: from django.db import models from django.contrib.auth.models import AbstractBaseUser 源码 : from d ...
- LeetCode题解 #1 Two Sum
在LeetCode做的第一到题 题目大意:给出n个数,在其中找出和为一个特定数的两个数. Input: numbers={2, 7, 11, 15}, target=9Output: index1=1 ...
- python的socket编程之udp编程
在上篇文章中,仅仅讲述了如何进行了TCP编程,在本章中,将讲述使用udp进行编码,先看如下的代码,服务器端: root@python 513]# cat serverudp.py #!/usr/bin ...
- 重写iframe内联框架中的内容
重写iframe内联框架中的内容,不使用src指向页面url,主动写入HTML代码: var ifr = document.getElementById("CMBC-certificatio ...