CSS动画animation与transition
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS动画animation与transition
⼀、区分容易混淆的⼏个属性和值
先区分⼀下css中的⼏个属性：animation（动画）、transition（过渡）、transform（变形）、translate（移动）。
CSS3中的transform(变形)属性⽤于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix；
transform(变形)是CSS3中的元素的属性，⽽translate只是transform的⼀个属性值；transform是transition（过渡动画）的transition-property的⼀个属性值。
transform⽂章链接
animation（动画）、transition（过渡）是css3中的两种动画属性。
animation强调流程与控制，对元素的⼀个或多个属性的变化进⾏控制，可以有多个关键帧（animation 和@ keyframes结合使⽤）；
transition强调过渡，是元素的⼀个或多个属性发⽣变化时产⽣的过渡效果，同⼀个元素通过两个不同的途径获取样式，⽽第⼆个途径当某种改变发⽣（例如hover）时才能获取样式，这样就会产⽣过渡动
画。
可以认为它有两个关键帧（Transition ＋ Transform ＝两个关键帧的Animation）。
transition⽰例：
(1)#box1，产⽣双边过渡效果
#box1在hover后有两个属性改变了，改变前和改变后的属性值分别是:
改变前：
background: green;
transform:rotate(0deg);//这个可视为默认状态，即旋转度为0
改变后：
background: red;
transform:rotate(180deg);
并且在#box1中设置了过渡动画 transition: background 2s ease,transform 2s ease-in 1s; 可知在background和transform属性变化时会产⽣动画效果，⽽这种效果的产⽣有两种途径：⼀种是从默认到hover触发了过渡效果；⼀种是从hover回到默认这两种属性也变化了，因此也产⽣了过渡效果。
注意点：这其中包括两个⽅向上的，当⿏标在div上悬停，div的样式从原始样式过渡到div：hover的样式；当⿏标离开div，样式⼜从div：hover过渡到div默认样式。
这两个⽅向上的过渡都是平滑不突兀的
1<style>
2 #box1 {
3 height: 100px;
4 width: 100px;
5 background: green;
6 transition: background 2s ease,transform 2s ease-in 1s;
7 }
8 #box1:hover{transform:rotate(180deg) scale(.5,.5);background:red;}
9</style>
10
11<body>
12<div id="box1">BOX1</div>
13</body>
（2）#box2 产⽣单边过渡效果
什么情况下只会产⽣单边过渡效果呢，看下⾯的例⼦，与#box1⼀样，#box2也有相同的两个属性发⽣了改变：
改变前：
background: blue;
transform:rotate(0deg);//这个可视为默认状态，即旋转度为0
改变后：
background: red;
transform:rotate(180deg);
但是与#box1不同的是，#box2将过渡动画 transition放在了 #box2:hover中进⾏设置。
这样情况下：只有在⿏标悬停时，才会触发过渡动画，过渡平滑；⽽⿏标离开时，不会产⽣过渡动
画，background、transform将会⽣硬的回到最初的属性值上。
注意点：这个例⼦中的过渡动画是单⼀⽅向上的。
当⿏标在div上悬停，div的样式从原始样式过渡到div：hover的样式；当⿏标离开div，样式会从div：hover的样式回到原始样式，但不是过渡动画的⽅式，⽽是直接回到原始样式，看上去⽐较突兀和⽣硬。
1<style>
2 #box2{
3 height: 100px;
4 width: 100px;
5 background: blue;
6 }
7 #box2:hover{
8 transform: rotate(180deg) scale(.5, .5);
9 background: red;
10 transition: background 2s ease, transform 2s ease-in 1s;}
11</style>
12</head>
13<body>
14<div id="box1">BOX1</div>
15<div id="box2">BOX2</div>
16</body>
⼆、transition
1、语法
transition是⼀个复合属性，可设置四个过渡属性，简写⽅式如下：
transition{ transition-property transition-duration transition-timing-function transition-delay}
transition-property：是⽤来指定当元素其中⼀个属性改变时执⾏transition效果，值有none（没有属性改变）、all（默认值，所有属性改
变），indent（某个属性名，⼀条transition规则，只能定义
⼀个属性的变化，不能涉及多个属性，如果要设置多个属性时，需分别设置，中间以逗号隔开）【当其值为none时，transition马上停⽌执⾏，当指定为all时，则元素产⽣任何属性值变化时都将执⾏transition效
果】。
链接： （transition动画和animation动画适⽤）
transition-duration ：过渡时间，是⽤来指定元素转换过程的持续时间，单位为s（秒）或ms（毫秒）
transition-timing-function：时间函数，允许你根据时间的推进去改变属性值的变换速率，值ease（逐渐变慢）、linear（匀速）、ease-in(加速)、ease-out（减速）、ease-in-out：（加速
然后减速）、cubic-bezier：（该值允许你去⾃定义⼀个时间曲线）
transition-delay：延迟，指定⼀个动画开始执⾏的时间，也就是说当改变元素属性值后多长时间开始执⾏transition效果，单位为s（秒）或
ms（毫秒）
2 、触发⽅式
伪类触发：:hover : focus :checked :active
js触发：toggleClass
3、以下情况下，属性值改变不能产⽣过渡效果
1. background-image，如url(a.jpg)到url(b.jpg)（与浏览器⽀持相关，有的浏览器不⽀持）等，
2. float浮动元素
3. height或width使⽤auto值
4. display属性在none和其他值（block、inline-block、inline）之间变换
5. position在stativ和absolute之间变换
4、transition属性浏览器兼容情况
三、animation
animation 属性结合@ keyframes 使⽤， animation 中的animation-name 需要设置成@ keyframes 的name ⼀致。
animation ⽰例 1 <style >
2 .box {height :100px ;width :100px ;border :15px solid black ;
3 animation : changebox 10s ease-in-out 3 alternate paused ;
4 }
5 .box:hover {
6 animation-play-state : running ;
7 }
8 @keyframes changebox {
9 10% { background :red ; }
10 50% { width :80px ; }
11 70% { border :
15px solid yellow ; }
12 100% { width :180px ; height :180px ; }
13 }14 </style >
15
16 <body >
17 <div class ="box"></div >
18 </body >
1、@keyframes 关键帧
1 @keyframes changebox {
2 10% { background:red; }
3 50% { width:80px; }
4 70% { border:15px solid yellow; }
5 100% { width:180px; height:180px; }
6 }
设置⽅法如上，其中0%和100%还可以使⽤关键词from 和to 来代表，⼤括号中设置不同时间段的样式规则。
如上⽰例中，animation 中设置animation-duration 的值是10s ，并通过animation-name 为changebox 引⼊@keyframes changebox 中的样式，表⽰在10秒内执⾏动画，动画执⾏过程个⼈理解如下：
特别注意的是：每⼀个百分号后⾯的样式变化都是从0s 开始的，除⾮有两个百分⽐设置了同⼀个样式的变化（上⽅的例⼦，50% { width:80px; } 100%{width:150px;}，那么宽度的整体情况会是0~5s 中宽
度由原始值变为80px ；5~10s 间，宽度由80px 变为180px ；），个⼈理解，在这个过程中，不是⼀个动画，⽽是多个⼩动画（⾃⼰起的名字，⽅便后⾯区分animation ）按照设定好的百分⽐对应的时间正好执⾏完成结
同⼀时间内有可能有多个⼩动画同时在执⾏，也有可能只有⼀个⼩动画在执⾏。
2、animation语法
设置好了关键帧，就可以设置animation属性了，animation也是⼀个符合属性，可以简写，语法如下：
animation{ animation-name animation-duration animatino-timing-function animation-delay animation-iteration-count animation-
direction animtion-play-state animation-fill-mode}
animation-name：⽤来调⽤@keyframes定义好的动画，与@keyframes定义的动画名称⼀致
animation-duration ：指定元素播放动画所持续的时间
animatino-timing-function ：和transition中的transition-timing-function 中的值⼀样。
根据上⾯@keframes中分析的animation中可能存在多个⼩动画，因此这⾥的值设置是针对每⼀个⼩动画所在时间范围内的属性变换速率。
animation-delay：定义在浏览器开始执⾏动画之前等待的时间，这⾥是指整个animation执⾏之前的等待时间，⽽不是上⾯说的多个⼩动画
animation-iteration-count：定义动画的播放次数，其通常为整数，默认是1,；取值为infinite，动画将⽆限次的播放。
animation-direction：主要⽤来设置动画播放⽅向，其主要有两个值：
normal 默认值，如果设置为normal时，动画每次循环都是向前（即按顺序）播放
alternate（轮流），动画播放在第偶数次向前播放，第奇数次向反⽅向播放（animation-iteration-count取值⼤于1时设置有效）
animtion-play-state：属性是⽤来控制元素动画的播放状态。
其主要有两个值：
running，可以通过该值将暂停的动画重新播放，这⾥的重新播放不是从元素动画的开始播放，⽽是从暂停的那个位置开始播放。
paused，暂停播放
注意：使⽤animtion-play-state属性，当元素动画结束后，元素的样式将回到最原始设置状态（这也是为什么要引⼊animation-fill-mode属性的原因）
animation-fill-mod： 默认情况下，动画结束后，元素的样式将回到起始状态，animation-fill-mode属性可以控制动画结束后元素的样式。
主要具有四个属性值：
none（默认，回到动画没开始时的状态。
）
forwards（动画结束后动画停留在结束状态）
backwords（动画回到第⼀帧的状态）
both（根据animation-direction轮流应⽤forwards和backwards规则）。
3、animation属性浏览器兼容情况。