HTML5+CSS3程序设计第10章CSS3中的变形与动画
css3中变形与动画（三）
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中变形与动画（⼀）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中的变形及过渡动画
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轴⽅向的缩放，其值为⼀数字，表⽰的是与原来尺⼨的⽐例系数。
HTML5 CSS3项目开发-项目十 变形、过渡与动画
3．动画的速度曲线
在CSS3中，使用animation-timing-function属性设置动画效果的速度曲线，具体格式为：
animation-timing-function:cubiczier(n,n,n,n)|liner|ease| -in|ease-out;
transform:none|transform-functions;
其中，none是默认值，表示无变形效果；transform-functions表示变形方法，可以设 置多个，不同的变形方法用空格隔开。变形方法有如下几种。
（1）translate()，平移方法，用于重新设置元素的位置。 （2）scale()，缩放方法，用于改变元素的尺寸。 （3）rotate()，旋转方法，用于使元素旋转一个角度。 （4）skew()，倾斜方法，用于使元素倾斜一个角度。
设置方法与transition-timing-function相同。
知识库：此外，还可以设置属性值为steps(step,start|end) 方法。它用于设置两个关键帧之间插入多少帧补间动画，step 表示帧数，参数值为正整数；参数start表示最后一帧是补间动 画的开始；end表示第一帧是补间动画的开始。当不使用 steps()方法时，关键帧之间的补间动画由浏览器自动填充。
此处的补间动画是指相邻两个关键帧之间的过渡过程，该 过程由几步完成，就称补间动画有几帧，也就是step参数值。
4．延迟时间
在CSS3中，使用animation-delay属性设置动画开始之前需要等待的时间，具体格式为： animation-delay:time;
设置方法与transition-duration属性相同。
网页设计与制作教程—Web前端开发(第6版)第10章 CSS3变形、过渡和动画属性
10.1 变形
<body> <div id="container"> <img src="images/pk.jpg" alt=""> <img src="images/pk.jpg" alt=""> <img src="images/pk.jpg" alt=""> <img src="images/pk.jpg" alt=""> <img src="images/pk.jpg" alt=""> <img src="images/pk.jpg" alt=""> </div>
background-color: aqua;
border: 2px dotted red;
}
.box div {
/*移位后的div元素*/
width: 200px;height: 150px;
background-color: bisque;
border: 2px solid blueviolet;
《网页设计与制作教程Web前端开发第6版》 配套资源
第10章 CSS3变形、过渡和动画属性
10.1 变形
使用CSS3的变形属性，可以对元素进行移动、旋转、缩放、倾斜这4种几何变换 操作，从而产生平滑的动画效果。
目录
第10章 CSS3变形、过渡和动画属性
10.1 变形 10.2 过渡 10.3 动画 10.4 习题
HTML5+CSS3网页设计基础 第十章 CSS3简单动画
HTML5+CSS3网页设计基础
第10章 CSS3简单动画
第7页
10.1.3 transition-timing-function属性
transition-timing-function属性规定过渡效果的速度曲线，默 认值为“ease”，其基本语法格式如下。 transition-timing-function:linear|ease|ease-in|ease-in-out; 各参数的意义如下。 linear：指定以相同速度开始至结束的过渡效果。 ease：指定以慢速开始，然后加快，最后慢慢结束的过渡效果 ease-in：指定以慢速开始，然后逐渐加快（淡入效果）的过 渡效果。 ease-out：指定以慢速结束（淡出效果）的过渡效果。 ease-in-out：指定以慢速开始和结束的过渡效果。 参考示例：例10-1-3.html
HTML5+CSS3网页设计基础
第10章 CSS3简单动画
第18页
10.2.3 2D转换
4. 旋转 rotate()方法用于旋转指定的元素，它通过指定的角度参数使 元素相对原点中心进行旋转。其基本语法格式如下。 transform:rotate(angle); 参数说明：angle表示要旋转的角度值。如果角度为正数值， 则顺时针旋转，否则，逆时针旋转。 参考示例：例10-2-4.html
HTML5+CSS3网页设计基础
第10章 CSS3简单动画
第6页
10.1.2 transition-duration属性
transition-duration属性用于定义过渡效果花费的时间， 默认值为0，常用单位是秒（s）或者毫秒（ms），其基 本语法格式如下。 transition-duration:time; 参考示例：例10-1-2.html
CSS3中的过渡、动画和变换
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-animation动画演示课件
于“0%〞而“to〞相 当于“100%〞，值得一说的是，其中“0%〞不能像别的属性取值一
样把百 分比符号省略。
后盾网 人人做后盾
animation: animation: name duration timing-function delay iteration-count direction
animation-name:
Keyframesyframes具有其自己的语法规那么，他的命名是由
“@keyframes〞开头，后面紧接着是这个“动画的名称〞加上一对花括号 “{}〞，括号
中就是一些不同时间段样式规那么，有点像我们css的样式写法一 样。对于一个
“@keyframes〞中的样式规那么是由多个百分比构成的，如 “0%〞到“100%〞之间，
后盾网 人人做后盾 houdunwang
CSS3动画
animation:
•
Animation只应用在页面上已存在的DOM元素上，而且他跟Flash和
JavaScript以及jQuery制作出来的动画效果又不一样，因为我们使用CSS3的
Animation制作动画我们可以省去复杂的js,jquery代码。
•
是否应该轮流反向播放动画
如果 animation-direction 值是 "alternate"，那么动画会在奇数次数〔1、3、 5 等
等〕正常播放，而在偶数次数〔2、4、6 等等〕向后播放。
animation-play-state:
•
控制元素动画的播放状态。有两个值，running和paused其中running为
我们可以在这个规那么中创立多个百分比，我们分 别给每一个百分比中给需要有动画
效果的元素加上不同的属性，从而让元素达 到一种在不断变化的效果，比方说移动，
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
transform的基本属性值
transform属性支持一个或多个变换函数。也就是说，通过transform属性可 以实现平移、缩放、旋转和倾斜等组合的变换效果。例如，实现平移并旋转效 果。不过在为其指定多个属性值时不是使用常用的逗号“,”进行分隔，而是使用 空格进行分隔。
应用transform属性实现旋转
skewY(<angle>)
参数值
度数
deg
变形原点
transform-origin 变换中心点
两个参数值
一个参数值
50%
变形原点
语法格式如下： transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?
指定过渡的延迟时间
transition-delay 过渡延迟的时间
指定过渡的延迟时间
该属性的语法格式如下： transition-delay：<time>[ ,<time> ]
目前主流浏览器并未支持标准的transform-origin属性，所以在实际开发中 还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀； 为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加webkit-前缀。
指定过渡的持续时间
transition-duration 过渡持续的时间
指定过渡的持续时间
该属性的语法格式如下： transition-duration：<time>[ ,<time> ]*
目前主流浏览器并未支持标准的transform-duration属性，所以在实际开发 中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀； 为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加webkit-前缀。
目前主流浏览器并未支持标准的transform属性，所以在实际开发中还需要 添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏 览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加webkit-前缀。
应用transform属性实现倾斜
skew(<angle>[,<angle>]) skewX(<angle>)
目前主流浏览器并未支持标准的transform-origin属性，所以在实际开发中 还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀； 为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加webkit-前缀。
变形原点
<percentage> <length>
应用transform属性实现平移
translate(<length>[,<length>]) translateX(<length>)
translateY(<length>)
参数
像素值
应用transform属性实现平移
X正 右移动
X负
左移动
Y正 Y负
下移动
上移动
应用transform属性实现缩放
4
应用transform属属性值
transform
平移 缩放
旋转
倾斜
transform-origin
中心点
transform的基本属性值
none translateX(<length>) translate(<length>[,<length>])
translateY(<length>)
CSS 中的变形与动画
01
2D变换——transform
03
动画——Animation
02
过渡效果——transition
1
2D变换——transform
主要内容
1
transform的基本属性值
2 应用transform属性实现旋转
3
应用transform属性实现缩放 应用transform属性实现倾斜
scaleX(<number>)
scaleY(<number>)
scale(<number>[[,<number>])
transform的基本属性值
skew(<angle>[,<angle>]) skewY(<angle>)
skewX(<angle>)
rotate(<angle>)
matrix(<number>,<number>,<number>,<number>,<number>,<number>)
transition-property：all | none | <property>[ ,<property> ]
指定参与过渡的属性
all none <property>
目前主流浏览器并未支持标准的transform-origin属性，所以在实际开发中 还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀； 为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加webkit-前缀。
指定过渡的动画类型
transition-timing-function 过渡的动画类型
指定过渡的动画类型
rotate(<angle>) 2D旋转 <angle>
正值
顺时针
负值
逆时针
应用transform属性实现缩放
scale(<number>[,<number>]) scaleX(<number>)
scaleY(<number>)
一个参数
指定的比例
应用transform属性实现缩放
当使用scaleX(<number>)或scaleY(<number>)函数时，实现的是非等比例 缩放，也就是只能对X轴进行缩放或者只能对Y轴进行缩放。
left
center
right center
top bottom
2
过渡效果——transition
主要内容
1
指定参与过渡的属性
2 指定过渡的持续时间
3
指定过渡的延迟时间
4
指定过渡的动画类型
指定参与过渡的属性
transition-property
参与过渡的属性
指定参与过渡的属性
该属性的语法格式如下：