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能开启硬件加速, ...
随机推荐
- application.events 识别组合键 参考。
https://blog.csdn.net/chinayu2007/article/details/43761277 在窗体上放上ApplicationEvents控件,在OnMessage消息中加入 ...
- oracle 普通数据文件备份与恢复
普通数据文件指:非system表空间.undo_tablespace表空间.临时表空间和只读表空间的数据文件.它们损坏导致用户数据不能访问,不会导致db自身异常.实例崩溃.数据库不恢复就无法启动的情况 ...
- linux 学习笔记二
笔记二 命令行格式 command [-options] parameter1 parameter2 ... 命令 选项 参数(1) 参数(2) options 和 参数 不是必须的 帮助命令 man ...
- 数据结构系列之2-3树的插入、查找、删除和遍历完整版代码实现（dart语言实现）
弄懂了二叉树以后,再来看2-3树.网上.书上看了一堆文章和讲解,大部分是概念,很少有代码实现,尤其是删除操作的代码实现.当然,因为2-3树的特性,插入和删除都是比较复杂的,因此经过思考,独创了删除时分 ...
- 第十一周总结 继承、this和super的区别和用法、方法的重写和重载
一.继承 1.子类继承父类,通过一个关键字 extends 2.子类的对象可以调用父类中的(public protected)属性和方法 当作自己的来使用 3.子类可以添加自己独有的属性和方法 4.子 ...
- [DS+Algo] 005 三种简单排序及其代码实现
目录 1. 冒泡排序 BubbleSort 1.1 算法描述 1.2 性能分析 1.3 Python 代码实现 2. 选择排序 SelectionSort 2.1 算法描述 2.2 选择排序的主要优点 ...
- springboot无法找到mapper😵
今天在学习springboot的过程中遇到mapper无法找到的问题,困扰了很久
- mysql数据库问题———登录进去无法操作显示You must reset your password using ALTER USER statement before executing this statement
linux操作mysql数据库,可以登陆进去,但是操作所有命令都显示You must reset your password using ALTER USER statement before exe ...
- windows10操作系统上使用virtualenv虚拟环境
前提win10上已经安装了Python环境! virtualenv库的使用: 安装 如果win10上同时安装了Python2和python3的安装virtualenv时用; Python2:pip i ...
- nginx运行出现 file not found 错误处理原因
在阿里云装nginx+php+mysql nginx运行出现 file not found 错误处理原因 1,第一情况 location ~ \.php$ { # root html; fastcgi ...