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能开启硬件加速, ...
随机推荐
- Linux的远程桌面折腾指南
因为实验服务器需要远程提供给研一童鞋使用,这两天折腾了一下Linux的远程桌面,在此记录总结一下.服务器系统为Lubuntu 16.04 远程登录到Linux 方案一:简单使用--x11vnc 单用户 ...
- Chapter02 第一节 开始学习C++
2.1 进入C++ 第一个示例程序: //myfirst.cpp #include <bits/stdc++.h> using namespace std; int main() { co ...
- 索引之----mysql联合索引
重要概念: 1．对于mysql来说,一条sql中,一个表无论其蕴含的索引有多少,但是有且只用一条. 2．对于多列索引来说(a,b,c)其相当于3个索引(a),(a,b),(a,b,c)3个索引,又由于 ...
- centos7 安装redis 出现cc: command not found错误解决
安装过程 1. 下载并解压 cd /root/software wget http://download.redis.io/releases/redis-3.2.4.tar.gz tar -zxvf ...
- Redis集群，备份，哨兵机制
原文:https://blog.csdn.net/zy345293721/article/details/87536144 1.集群 先来简单了解下redis中提供的集群策略, 虽然re ...
- 在centos6.4下安装python3.5
1.安装依赖包 ./configure --prefix=/usr/local/python3.5 --enable-shared make && make install yum g ...
- 好用的 Puppeteer 辅助工具 Puppeteer Recorder
Puppeteer Puppeteer 是一个Node库,它提供了一个高级API来控制DevTools协议上的Chrome或Chromium,常用于爬虫.自动化测试等,你在浏览器手动完成的大多数事情都 ...
- Linux文档整理之【Nginx安装Docker】
这次整理的文档是Docker安装 先说明下我用的系统是Linux Centos,不同的Linux版本差别不大. 1.安装依赖包 sudo yum install -y yum-utils device ...
- vue项目1-pizza点餐系统11-设计menu页面
菜单的页面设计是基于bootstrap实现的,主要用到的是table标签,其中获取data数据用到遍历. <template> <div class=""> ...
- MongoDB入门_MongoDB特色
1. sql数据库与nosql数据库对比 nosql不支持实时一致性转而支持数据的最终一致性,数据有一定的延迟 redis数据库支持部分事物,而mongodb不支持事物 nosql数据库没有多表联查功 ...