css学习26：过度，动画和变换
1、使用过渡
过渡效果一般是由浏览器直接改变元素的CSS属性实现的。例如，如果使用:hover选择器，一旦用户将鼠标悬停在元素之上，浏览器就会应用跟选择器关联的属性。
#banana:hover {
}
CSS过渡特性允许我们控制应用新属性值的速度。比如你可以选择逐渐改变示例中span元素的外观，让鼠标移到单词banana上的效果更和谐。
过度属性：
| 属性 | 说明 | 值 |
|---|---|---|
| transition-delay | 指定过渡开始之前的延迟时间 | 时间 |
| transition-duration | 指定过渡的持续时间 | 时间 |
| transition-property | 指定应用过渡的属性 | 字符串 |
| transition-timing-function | 指定过渡期间计算中间值的方式 | |
| transtion | 在一条声明中指定所有过渡细节的简写属性 |
transition简写属性的格式如下:
transition:
主流浏览器还都不能直接支持过渡属性，不过，除了IE，所有浏览器都可以使用厂商前缀实现这些属性。
#banana:hover {
-webkit-transition-delay: 100ms;
-webkit-transition-property: background-color,color,padding,font-size,border;
-webkit-transition-duration: 500ms;
}
过渡会在用户将鼠标悬停在span元素上100ms之后开始，持续时间为500ms，过渡应用到background-color、color、padding、font-size和border属性。
过渡属性的值用逗号隔开，这样过渡效果才会同时出现。可以为延迟时间和持续时间指定多个值，它代表的意思是不同的属性在不同的时间点开始过渡，且持续时间也不同。
1.1 创建反向过度
#banana {
-webkit-transition-delay: 10ms;
-webkit-transition-duration: 250ms;
}
#banana:hover {
-webkit-transition-delay: 10ms;
-webkit-transition-property: background-color,color,padding,font-size,border;
-webkit-transition-duration: 250ms;
}
1.2 选择中间值的计算方式
使用过渡时，浏览器需要为每个属性计算初始值和最终值之间的中间值。使用transition-timing-function属性指定计算中间值的方式，表示为四个点控制的三次贝塞尔曲线。有五种预设曲线可以选择,由下面的值表示:
- ease(默认值)
- linear
- ease-in
- ease-out
- ease-in-out
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fv6x6CfW-1613011549245)(D:\u(backups)]\note\css\img\26-1.JPG)
搞清楚这些值最简单的办法就是在自己的HTML文档中试验。还有另外一个值cubic-bezier,可用来指定自定义曲线。不过，我的体会是过渡没那么平滑，缺乏粒度破坏了大多数值，这同时也导致指定自定义曲线基本上毫无意义。希望实现能在最终的标准中得以集中改善。
#banana:hover {
-webkit-transition-delay: 10ms;
-webkit-transition-property: background-color,color,padding,font-size,border;
-webkit-transition-duration: 250ms;
-webkit-transition-timing-function: linear;
}
2、使用动画
CSS动画本质上是增强的过渡。在如何从一种CSS样式过渡到另一种样式的过程中，你具有了更多选择、更多控制，以及更多灵活性。
动画属性：
| 属性 | 说明 | 值 |
|---|---|---|
| animation-delay | 设置动画开始前的延迟 | 时间 |
| animation-direction | 设置动画循环播放的时候是否反向播放 | normal,alternate |
| animation-duration | 设置动画播放的持续时间 | 时间 |
| animation-iteration-count | 设置动画的播放次数 | infinite，数值 |
| animation-name | 指定动画名称 | none,字符串 |
| animation-play-state | 允许动画暂停和重新播放 | running,paused |
| animation-timing-function | 指定如何计算中间动画值 | ease,linear,ease-in,ease-out,ease-in-out,cubic-bezier |
animation简写属性的格式如下:
animation:
注意,这些属性都不是用来指定要作为动画的CSS属性的。这是因为动画是在两部分定义的。第一部分包含在样式声明中。它们定义了动画的样式，但并没有定义哪些属性是动画。第二部分使用@key-frames规则创建，用来定义应用动画的属性。
#banana:hover {
-webkit-animation-delay: 100ms;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: 'GrowShrink';
}
@-webkit-keyframes GrowShrink {
to {
font-size: x-large;
border:medium solid white;
background-color: green;
color: white;
padding: 4px;
}
}
声明的开始是@keyframes，接着指定了这组关键帧的名字GrowShrink。声明内部指定了一组要应用动画效果的属性。这里在一个to声明中指定了五个属性及其值。这是关键帧设置最简单的类型。to声明定义了一组设置动画样式的属性,同时也定义了动画结束时这些属性的最终值。动画的初始值来自进行动画处理的元素在应用样式之前的属性值。
代码清单中的动画跟本章之前为过渡应用的示例相同，在浏览器中查看HTML文档并且将鼠标悬停在span元素上后，效果甚至也看起来差不多。最起码刚开始看起来是完全一样的，然后动画不断重复，这是第一点不同。
2.1 使用关键帧
1）设置初始状态
在前面的示例中，要处理为动画的属性的初始值来自元素自身。你可以使用from子句指定另一组初始值。
@-webkit-keyframes GrowShrink {
from{
font-size: xx-small;
background-color: red;
}
to {
font-size: x-large;
border:medium solid white;
background-color: green;
color: white;
padding: 4px;
}
}
没有from子句时，to子句指定的其他属性在动画开始时的初始值来自元素自身，现在动画开始时为from子句指定的初始值。
2）指定中间关键帧
也可以添加其他关键帧定义动画的中间阶段。这是通过添加百分数子句实现的。
@-webkit-keyframes GrowShrink {
from{
font-size: xx-small;
background-color: red;
}
50% {
background-color: yellow;
padding: 1px;
}
75% {
color: white;
padding: 2px;
}
to {
font-size: x-large;
border:medium solid white;
background-color: green;
color: white;
padding: 4px;
}
}
中间关键帧有两个用途。一是为属性定义新的变化速率。padding属性的设置就是从这个角度出发的。在中间点（由50%子句定义)，动画元素的内边距是1px;在75%处，内边距是2px;而在动画结束的时候，内边距被设置为4px。浏览器会使用animation-timing-function属性指定的调速函数计算由一个关键帧移动到下一个关键帧需要的中间值,以确保关键帧与关键帧之间流畅地播放。
中间关键帧的另一个用途是定义属性值，以便创建更为复杂的动画。background-color属性的设置就是从这个角度出发的。初始值( red )在from子句中定义,在50%处,这个值会变成yellow,而在动画结束时，它又会成为green。通过添加非序列化的中间值，我在一个动画中创建了两个颜色过渡:由红色到黄色，由黄色到绿色。注意，我没有在75%子句中设置颜色的中间值，因为不必给每个关键帧都设置值。
2.2 设置重复的方向
动画结束后浏览器可以选择接卞来动画以何种方式重复。使用animation-direction属性指定首选方式。
| 值 | 说明 |
|---|---|
| normal | 每次重复都向前播放，如果可重复播放多次，每次动画都恢复初始状态，从头开始播放 |
| alternate | 动画先向前播放，然后反方向播放，相当于animation-iteration-count属性的值为2 |
#banana:hover {
-webkit-animation-delay: 100ms;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: 'GrowShrink';
-webkit-animation-direction: alternate;
}
@-webkit-keyframes GrowShrink {
to {
font-size: x-large;
border:medium solid white;
background-color: green;
color: white;
padding: 4px;
}
}
2.3 理解结束状态
CSS动画的一个局限是关键帧为属性定义的值只能在动画中应用。动画结束后，动画元素的外观回到初始状态。
2.4 初始布局时应用动画
跟过渡相比，动画的一个优势是你可以将其应用到页面的初始布局。
页面一旦加载就会自动应用样式，这就意味着浏览器一旦显示HTML就有了动画效果。
2.5 重用关键帧
我们可以对同一组关键帧应用多个动画，从而为动画属性配置不同的值。
2.6 为多个元素应用多个动画
前面例子的一个变体是为多个元素应用同一个动画。在包含动画细节的样式中，扩展选择器的范围即可实现这一点。
#banana,#apple {
-webkit-animation-delay: 100ms;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: 'GrowShrink';
-webkit-animation-direction: alternate;
}
@-webkit-keyframes GrowShrink {
to {
font-size: x-large;
border:medium solid white;
background-color: green;
color: white;
padding: 4px;
}
}
2.7 停止和启动动画
animation-play-state属性可以用来停止和启动动画。如果这个属性的值为paused，动画就会停止。如果换成playing，动画就会开始播放。
3、使用变换
我们可以使用CSS变换为元素应用线性变换，也就是说你可以旋转、缩放、倾斜和平移某个元素。
| 属性 | 说明 |
|---|---|
| transform | 指定应用的变换功能 |
| transform-origin | 指定变换的起点 |
3.1 应用变换
我们通过transform属性为元素应用变换。这个属性允许的值是一组预定义的函数。
transform属性的值：
| 值 | 说明 |
|---|---|
| translate(长度值或百分数值) | 在水平方向、垂直方向或者两个方向上平移元素 |
| translateX(长度值或百分数值) | |
| translateY(长度值或百分数值) | |
| scale(数值) | 在水平方向、垂直方向或者两个方向上缩放元素 |
| scaleX(数值) | |
| scaleY(数值) | |
| rotate(角度) | 旋转元素 |
| skew(角度) | 在水平方向、垂直方向或者两个方向上使元素倾斜一定的角度 |
| skewX(角度) | |
| skewY(角度) | |
| matrix(4~6个数值，逗号隔开) | 指定自定义变换。大多数浏览器还没有实现z轴缩放，因此最后两个数字可以忽略（有些情况必须要省略) |
其他CSS特性一样，主流浏览器还没有直接实现变换。使用了-moz前缀，因为Firefox浏览器算是实现最完整的。
#banana{
-moz-transform: rotate(-45deg) scaleX(1.2);
}
3.2 指定元素变换的起点
transform-origin属性允许我们指定应用变换的起点。默认情况下，使用元素的中心作为起点，不过，可以使用下面值选择其他起点。
属性的值：
| 值 | 说明 |
|---|---|
| % | 指定元素x轴或者y轴的起点 |
| 长度值 | 指定距离 |
| left | 指定x轴上的位置 |
| center | |
| right | |
| top | 指定y轴上的位置 |
| center | |
| bottom |
#banana {
-moz-transform-origin: right top;
}