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能开启硬件加速, ...
随机推荐
- Golang基础(3)：数组，切片和字典
一:数组 数组是一个具有相同类型元素,固定长度的有序集合,一般定义如下:var x [5]int表示数组是一个整数型数组,长度为5数组的几种定义方式 a: var来定义数组,然后依次赋值 packag ...
- Django框架效率问题的解决方法和总…
由于项目的需要,学习了Django框架,Django框架的MTV很清晰,通过MTV能够很好地了解Django框架的内部机理.但是在使用过程中发现了一个严重的问题,就是当有大量IO(写数据库操作)的时候 ...
- Jmeter运行后，查看结果树中的响应数据出现中文乱码。
参考:https://blog.csdn.net/qq_15228737/article/details/82597482 https://baike.baidu.com/item/UTF-8/481 ...
- vue封装一些常用组件loading、switch、progress
vue封装一些常用组件loading.switch.progress github文档https://github.com/zengjielin/vue-component-library loadi ...
- [DS+Algo] 005 三种简单排序及其代码实现
目录 1. 冒泡排序 BubbleSort 1.1 算法描述 1.2 性能分析 1.3 Python 代码实现 2. 选择排序 SelectionSort 2.1 算法描述 2.2 选择排序的主要优点 ...
- [转帖]又一国产x86处理器可大规模上市：Intel至强核心 安全监测管控
又一国产x86处理器可大规模上市:Intel至强核心 安全监测管控 https://www.cnbeta.com/articles/tech/850525.htm 不知道是不是有一起汉芯事件 国产CP ...
- 剑指Offer编程题（Java实现）——反转链表
题目描述 输入一个链表,反转链表后,输出新链表的表头. 思路一 使用头插法迭代进行反转 实现 /* public class ListNode { int val; ListNode next = n ...
- Shell的常用十八条命令
Shell的18条常用命令整理 1. ls: 类似于dos下的dir命令 ls最常用的参数有三个: -a -l -F. ls –a Linux上的文件以.开头的文件被系统视为隐藏文件,仅用ls命令是看 ...
- 在搭建Maven项目时导入elasticsearch架包时遇到的问题
<!-- 使用elasticsearch 需要导入两个包,从网上复制的可能因为有特殊字符报 cvc-complex-type.2.3: Element 'dependency' cannot h ...
- honpeyhonepy
2019.09.15 简历编辑功能: 2019.09.23 爬虫功能(智联招聘) 2.1 AI同步功能 2019.10.08 登录功能(包括普通用户登录.管理员.招聘人员) 2019.11.10 鉴权 ...