下载文档原格式
css3中变形与动画（三）可以实现矩阵变换，实现属性的平滑过渡，animation意思是动画，动漫，这个属性才和真正意义的⼀帧⼀帧的动画相关。
本⽂就介绍animation属性。
animation属性通过⼀些关键帧中元素属性的改变来实现动画效果。
当然也可以控制动画持续时间，动画迭代次数等。
⼀、例⼦在介绍时开篇有⼀个例⼦就是实现⿏标放上去，div宽度从100px缓慢增⼤到200px。
⽤transition实现⽅法如下div:hover{width: 200px;transition:width 5s ease-in;}⽤animation也能实现类似效果，如下：<style type="text/css">div {width: 100px;height: 100px;background-color: red;}@keyframes enlarge {0% {width: 100px;}50% {width: 150px;}100% {width: 200px;}}div:hover {/*width: 200px; *//*transition:width 5s ease-in;*/animation: 5s enlarge;}}</style><div></div>⿏标悬停，动画持续5s，在时间到⼀半时div的宽度要从100px达到150px,5s时div宽度达到200px，动画结束。
但是transition和animation效果还是有差别的，⿏标hover上去，transition动画执⾏完后width保持200px;animation动画执⾏完后width回到100px。
当然这只是默认效果，这个动画完成时的效果也是可以修改的。
修改上⾯代码中animation为animation: 5s enlarge forwards;就可以让动画执⾏完后停在最后⼀帧。
css3中变形与动画（⼀）css3制作动画的⼏个属性：变形(transform)，过渡(transition)和动画(animation)。
⾸先介绍transform变形。
transform英⽂意思：改变，变形。
css3中transform主要包括以下⼏种：旋转(rotate),扭曲(skew)，缩放（scale)、移动(translate)和矩阵变形matrix。
语法：transform ： none | <transform-function> [ <transform-function> ]*transform: rotate | scale | skew | translate |matrix;none就是默认值，不进⾏变形。
<transform-function>:表⽰⼀个或多个变换函数，以空格分开。
即可同时对⼀个元素进⾏transform的多种属性操作，例如同时⽤rotate,scale 和translate三种。
rotate(<rotate-angle> [<cx> <cy>])skewX(<skew-angle>)skewY(<skew-angle>)scale(<sx> [<sy>])translate(<tx> [<ty>])matrix(<a> <b> <c> <d> <e> <f>)⼀、旋转rotaterotate(<angle>) :通过指定的⾓度参数对元素指定⼀个2D rotation(2D旋转)，需先有transform-origin属性的定义。
transform-origin定义的是旋转的基点，其中angle是指选择⾓度，正顺时针旋转，负逆时针旋转。
Css中的变形及过渡动画在css3的标准中新增加了变形样式，这些样式使得⽹页中各元素的位置形状的变换变得更加容易。
其语法如下：transform：none | <transform-function>+其中对于<transform-function>这⼀属性值，css中规定了4类常⽤变换1.translate()该值指定对象的2D translation（2D平移）。
第⼀个参数对应X轴，第⼆个参数对应Y轴。
如果第⼆个参数未提供，则默认值为0 。
例：.exp{width:150px;height:150px;background:red;}.exp:hover{transform:translate(100px,100px);} 当⿏标移动到元素上时，元素的位置发⽣了改变（向左平移了100px，向下平移了100px）。
当然也可以指制定某⼀个⽅向上的平移，如translateX（），translateY（），这时，括号⾥的值只有⼀个，表⽰平移的长度。
2.rotate（）该值指定了对象的2d旋转，括号⾥⾯为旋转度数，单位为deg。
特别注意，在使⽤该属性值时要先设置元素的中⼼点，即transform-origin，这个样式的值可以为表⽰长度的单位，也可以是百分⽐。
例：.exp{width:150px;height:150px;background:red;}.exp:hover{transform-origin:0 50%;transform:rotate(45deg);}在2d旋转中默认旋转⽅向为顺时针⽅向，旋转中⼼为transform-origin所设置的位置。
同时，我们也可以定义其旋转⽅式为沿着旋转轴⽅向旋转，例如rotateX（），rotateY（）。
3.Scale（）该属性表⽰的是元素的缩放，在2d变形中括号⾥的值有两个，分别表⽰x轴和y轴⽅向的缩放，其值为⼀数字，表⽰的是与原来尺⼨的⽐例系数。
CSS3中的过渡、动画和变换⼀、过渡 过渡效果⼀般由浏览器直接改变元素的CSS属性实现。
a、transition属性 transition 属性是⼀个简写属性，⽤于设置四个过渡属性：transition-propertytransition-durationtransition-timing-functiontransition-delay 注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产⽣过渡效果。
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Document</title>6<style type="text/css">7 div{8 width: 100px;9 height: 100px;10 background: blue;11 transition: width 2s,background 3s,3S linear 3s;12 }13 div:hover{14 width: 300px;15 background: red;16 transition: width,background, 3s linear 2s;17 }18</style>19</head>20<body>21<div>2223</div>24</body>25</html> 可以设置设置某个属性的过渡持续时间（transition: width 2s,background 3s,3s linear 3s;），也可以设置所有的属性的过渡的持续时间（transition: width,background, 3s linear 2s）属性值和时间必须⽤逗号隔开; b、transition-property transition-property 属性规定应⽤过渡效果的 CSS 属性的名称。
《HTML5+CSS3网页设计与制作》课程教学大纲（课程英文名称）课程编号：学分：5学分学时：74学时（其中：讲课学时：50学时上机学时：24学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3网页设计与制作》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
该课程属于“1+X证书制度”Web前端的初级课程，通过本课程，能够为学习后面的前端知识夯实基础。
二、课程设计理念与思路课程设计理念：课程的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。
三、教学条件要求开发工具：Dreamweaver CS6或其他代码编辑工具四、课程的主要内容及基本要求第一章HTML5+CSS3网页设计概述学习单元HTML5+CSS3网页设计概述学时2学时学习目标◆了解网页概念和组成。
◆理解HTML、CSS和JavaScript的功能和作用。
◆熟悉Dreamweaver工具的基本操作。
学习内容知识点了解掌握重点难点认识网页√网页名词解释√Web标准√HTML简介√CSS简介√JavaScript简介√网页的展示平台—浏览器√认识Dreamweaver界面√Dreamweaver初始化设置√Dreamweaver基本操作√【阶段案例—创建第一个网页】√第二章初识HTML5学习单元初识HTML5 学时6学时学习目标◆了解HTML和HTML5的基本结构，能够区分两者的结构差异。
