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) 个人理解两者不同点在于 过渡 只能指定属性的 开始值 与 结束值,然后在这两个属性值 ...
随机推荐
- 手机页面开发的meta
<meta name="viewport" content="width=device-width, initial-scale=1"> 手机环境. ...
- Julia - 浮点型
浮点数类型: Float64 类型,双精度,64 位 Float32 类型,单精度,32 位 Float16 类型,半精度,16 位 julia> 5.0 5.0 julia> 5. 5. ...
- 一，我的Android Studio 3.0.1 安装过程
安装成功于20171231的0:46分. 简要记录我的安装过程如下: 一,安装JDK1.8.X 二,安装ANDROID STUDIO.ZIP 三,运行AS,后按提示下载SDK,NDK,必要时设置一下J ...
- mongodb（四）
Count+Distinct+Group数据库命令操作固定集合特性GridFS文件系统补充服务器端脚本 db.runCommand({group:{ ns:"persons", k ...
- 通过CSS 给界面必选项添加星号
在制作网页的时候,如果一个选项是必填的,通常会给选项添加一个红色星号,来引起用户的注意:最近笔者刚好遇见一个类似的需求,本来可以用html标签和style就可搞定,由于笔者需要改动的界面比较多(六个) ...
- Windows Intel VT-x开启
解决虚拟机安装64位系统“此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态”的问题 背景:win7 旗舰版 64位+VMware 10.0 启动虚拟机时报错 问题:已将该虚拟机 ...
- Abstract（抽象）
谈到抽象,就先谈谈面向对象语言的三大特性,也是人们口中常说的封装.继承.多态. 封装:什么是封装,按到我的理解,封装就是把某些类的相关属性和方法封装,对内实现数据影城,对外提供稳定接口. 继承:从字面 ...
- plsql中的光标
操作oracle数据库效率最高的语言就是plsql程序,故而把访问数据库的代码写成plsql的执行效率要高于java,c ,c++等代码
- 验证码及密码加密在java中使用
package com.huawei.filter; import java.io.IOException; import javax.servlet.Filter;import javax.serv ...
- 网络编程基础之Socket套接字简单应用
一.Socket套接字实现通信循环 所谓通信循环,简单理解就是客户端可以给服务端循环发送信息并获得反馈的过程. 1.基础版 通信循环的程序分为两部分,即两个python模块,分别为客户端.py和服务端 ...