css3中的过渡效果和动画效果
一、CSS3 过渡
（一）、CSS3过渡简介
CSS3过渡是元素从一种样式逐渐改变为另一种的效果。
实现过渡效果的两个要件：
- 规定把效果添加到哪个 CSS 属性上
- 规定效果的时长
定义动画的规则
过渡transition （作用） 将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”
（二）、transition属性
语法 ： {transition： 属性名 持续时间 过渡方法}
- transition-property 属性的名字（如果是一个属性就带有这个属性的名字；如果是多个属性，属性名之间用逗号隔开；如果是所有属性，用all表示即可。）表示对哪个属性进行变化。
- transition-duration 变化持续的时间长度（秒或是毫秒）
- transition-timing-function 过渡实现的方式（比如说，先慢后快/先快后慢），具体实现的时候是以函数来实现的。
- transition-delay 过渡开始前等待的时间，单位为秒或是毫秒。
transition-timing-function 属性取值
- linear 匀速（线型过渡）
- ease 先慢后快再慢
- ease-in 先慢后快
- ease-out 先快后慢
- ease-in-out 开头慢结尾慢，中间快
实例：
原有的状态是灰底红字，鼠标悬停在上面利用transition属性设置了一个3s 之内的变化，背景为由红到蓝的渐变色，文字颜色也逐渐变成白色。
1、首先定义div标签的原始状态，
2、再设置当鼠标悬停在上面的状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
div{
height: 100px;
width:300px;
line-height:30px;
border-radius:5px;
align-content:center;
color:red;
background-color: #999;
transition:all 1s linear;
}
div:hover{
color:white;
/*background-color: #007;*/
background:linear-gradient(to bottom,#f0f,#00f)
}
</style>
</head>
<body>
<div align="center" style="font-size:30px">transition</div>
</body>
</html>
表现效果：（因为过渡是一个动态的效果，所以下面仅展示初始状态、中间、过渡后的效果）
初始
中间
最后
二、CSS3动画
（一）、CSS3中的动画实现的是什么效果
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。动画效果是通过animation属性来完成的。
用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。
实现动画效果两要件：
- 1、首先要定义一个动画 ，定义一个@keyframes 规则（关键帧）
- 2、调用动画 动画定义好之后，使用animation 属性调用动画
了解动画的形成原理：
是根据人的“视觉暂留”现象，将一组静止的图形连续出现后，便形成了动画。Flash动画就是基于此原理来制成动画的，时间轴上的每一帧在编辑区中有不同的图形，当时间轴上的帧以当前帧频向前移动时，我们看到的是编辑区中的一组图形不断变化，从而产生了运动的视觉效果
（二）、animation属性设置动画效果
animation属性取值
- @keyframes 规定动画
- animation 所有动画属性的简写属性，除了animation-play-state属性
- animation-name 规定@keyframes 动画名称
- animation-duration 规定一个动画完成的周期所花费的秒或毫秒。默认值为0，
- animation-timing-function 规定动画的速度曲线。默认值为ease
- animation-delay 动画开始前等待的时间。取值可为负（-2s 动画跳过 2 秒进入动画周期），属性不兼容 IE 9以及更早版本的浏览器.
- animation-iteration-count 规定动画播放的次数。默认值为1
- animation-direction 规定动画是否在下一周期逆向地播放。默认值是normal
- animation-play-state 规定动画是否正在运行或暂停。默认值是running
- animation-fill-mode 规定对象动画时间之外的状态
animation-timing-function 属性取值
- linear 匀速（线型过渡）
- ease 先慢后快再慢
- ease-in 先慢后快
- ease-out 先快后慢
- ease-in-out 开头慢结尾慢，中间快
实例：
用动画animation属性实现在位置变化的同时颜色也发生相应的变化。
颜色：由红色—黄色—蓝色—绿色—红色；
位置：距左0px距顶0px—距左200px距顶0px—距左200px距顶200px—距左0px距顶200px—距左0px距顶0px（回到原地）
animation属性：@keyframes(关键帧) 动画名称为mycolor；一个动画周期为5s；动画运动先慢后快再慢ease；动画开始前等待2s；无限(infinite)循环播放；动画正在运行(runing)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
div{
width:400px;
height:400px;
background:red;
position:relative;
animation-name:mycolor;
/*animation-name规定@keyframes 动画名称*/
animation-duration:5s;
/*animation-duration规定一个动画完成的周期所花费的秒或毫秒*/
animation-timing-function:ease;
/*animation-timing-function规定动画的速度曲线*/
animation-delay:2s;
/*animation-delay规定动画何时开始。默认值为0*/
animation-iteration-count:infinite;
/*animation-iteration-count规定动画播放的次数*/
animation-direction:alternate;
/*animation-driection规定动画是否在下一周期逆向地播放*/
animation-play-state:running;
/*animation-play-state规定动画是否正在运行或暂停*/
}
@keyframes mycolor
{
0% {background:red;left:0px; top:0px; }
25% {background:yellow; left:200px; top:0px;}
50% {background:blue;left:200px; top:200px}
75% {background:green;left:0px; top:200px;}
100% {background:red;left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
除了可以这样每个属性单独设置，也可以使用animation 的简写属性：
div{
width:400px;
height:400px;
background:red;
position:relative;
animation:mycolor 5s linear 2s infinite alternate;
}
css3中的过渡效果和动画效果的更多相关文章
- ScrollMe – 在网页中加入各种滚动动画效果
ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...
- 推荐9款使用CSS3实现的超酷动画效果
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...
- 实用CSS3的transform实现多种动画效果
查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...
- html5+css3第一屏滚屏动画效果
详细内容请点击 在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-art ...
- css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)
源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...
- 第8章 CSS3中的变形与动画（上）
变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时 ...
- CSS3中的变形与动画（二）
CSS3动画 过渡属性transiton-property 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可 ...
- CSS3中的过渡、动画和变换
一.过渡 过渡效果一般由浏览器直接改变元素的CSS属性实现. a.transition属性 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property t ...
- CSS3中的变形与动画【转】
最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...
随机推荐
- Django 多数据库联用（同一个APP的models里不同class用不同数据库）
很多网站有多数据库联用的文章,如自强学堂http://code.ziqiangxuetang.com/django/django-multi-database.html 大都只讲解如何让不同的app对 ...
- python中的序列化和反序列化
~~~~~~滴滴,,什么是序列呢?可以理解为序列就是字符串.序列化的应用 写文件(数据传输) 网络传输 序列化和反序列化的概念 序列化模块:将原本的字典.列表等内容转换成一个字符串的过程就叫做序列 ...
- 各种CNN模型
Resnet: model_urls = { 'resnet18': 'https://download.pytorch.org/models/resnet18-5c106cde.pth', 'res ...
- Sql 把Xml字符串转换成一张表
分享一个Sql技巧,把xml字符串转换成一个表格 DECLARE @IdHandel INT EXEC sp_xml_preparedocument @IdHandel OUTPUT, @Bar_Ip ...
- 【Windows Server存储】MBR和GPT分区表
MBR和GPT分区表 分区表用于引导操作系统 master boot record(MBR)于1983年首次在PC上推出 最大4个主分区 2太空间 GUID Partition Table(GPT), ...
- 文件类型 | 命令ln | 软链接硬链接
1.9文件类型 1.9.1常见文件类型 d:目录 -:普通文件 l:链接文件 b:设备 1.9.2文件后缀名 sh:shell脚本 tar.gz:压缩包 my.cnf:配置文件 test.zip:压缩 ...
- java 数组详细介绍
一.概述 数组(Array),是多个相同类型数据按一定顺序排列的集合,并使用一个名字命名,并通过编号的方式对这些数据进行统一管理 数组常见概念: 数组名, 下标(或索引), 元素, 数组的长度 数组本 ...
- 46. Permutations (JAVA)
Given a collection of distinct integers, return all possible permutations. Example: Input: [1,2,3] O ...
- Centos6.6安装MySQL5.6.24
1.首先需要编译器gcc 编译器和cmake yum -y install gcc+ gcc-c++ cd /usr/local/src wget http://www.cmake.org/files ...
- mongodb 在 linux 中的安装和简单使用
一.环境介绍 1．mongodb版本: mongodb-linux-x86_64-rhel70-3.2.22 # 点击下载2．linux版本: Ubuntu 18.04.2 LTS 二.安装1．上传 ...