1.过渡
1.1 使用过渡
过渡效果一般是由浏览器之间改变元素的CSS属性实现的.例如,如果使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性.
CSS过渡属性允许我们控制应用新属性值的速度.比如可以选择逐渐改变元素的外观.
属性 | 说明 | 值 |
---|---|---|
transition-delay | 指定过渡开始之前的延迟时间 | 时间 |
transition-duration | 指定过渡的持续时间 | 时间 |
transition-property | 指定应用过渡的属性 | 字符串 |
transition-timing-function | 指定过渡期间计算中间值的方式 | |
transition | 在一条声明中指定所有过渡细节的简写属性 |
transition简写属性的格式如下:
transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>
1.2 创建反向过渡
过渡只有在应用与其关联的样式时才会生效.默认情况下,元素的外观会立刻回到初始状态
因为这个原因,大多数过渡成对出现:暂时状态的过渡和方向相反的反向过渡.
1 | #menu{ |
刚开始布局页面时浏览器不会应用过渡,这意味着HTML文档一开始显示时就会直接应用初始样式,之后才会通过过渡应用新样式.
1.3 选择中间值的计算方式
使用过渡时,浏览器需要为每个属性计算初始值和最终值之间的中间值.使用 transition-timing-function
属性指定计算中间值的方式,表示为四个点控制的三次贝塞尔曲线.有五种预设曲线可以选择:
值 | 描述 |
---|---|
ease(默认值) | 规定慢速开始,然后变快,然后慢速结束的过渡效果 |
linear | 规定以相同速度开始至结束的过渡效果 |
ease-in | 规定以慢速开始的过渡效果 |
ease-out | 规定以慢速结束的过渡效果 |
ease-in-out | 规定以慢速开始和结束的过渡效果 |
这五种曲线展示了中间值随着时间的推移变为最终值的速率.
还有另外一个值cubic-bezier(n,n,n,n)
,可以用来指定自定义曲线,可能的值是0-1之间的数值.
2.使用动画
CSS动画本质上是增强的过渡.
动画属性
属性 | 说明 | 值 |
---|---|---|
animation-delay | 设置动画开始前的延迟 | 时间 |
animation-direction | 设置动画循环播放的时候是否反向播放 | normal, alternate |
animation-duration | 设置动画播放的持续时间 | 时间 |
animation-iteration-count | 设置动画的播放次数 | infinite, 数值 |
animation-name | 指定动画名称 | none , 字符串 |
animation-play-state | 允许动画暂停和重新播放 | runing, paused |
animation-timing-function | 指定如何计算中间动画值 | ease, linear, ease-in, ease-out, ease-in-out, cublic-bezier |
animation简写属性的格式如下:
animation: animation-name animation-duration animation-timing-function animation-delay animation-count;
注意,这些属性都不是用来指定要作为动画的CSS属性的.这是因为动画是在两部分定义的.
第一部分包含在样式声明中,使用上表列出的属性.它们定义了动画的样式,但是没有定义哪些属性是动画.
第二部分使用@key-frames规则创建,用来定义应用动画的属性.
chrome支持替代的-webkit-方法
1 | #box1:hover{ |
动画的设置分为两部分.
第一部分是在样式中定义动画属性,其中应用了延迟时间,持续时间,重复播放以及中间函数.此外,还需要给动画属性起个名字.这样就相当于告诉浏览器找一组指定名字的关键帧, 然后将这些基本属性的值应用到 @keyframes指定的动画属性上.
第二部分是关键帧的声明.声明的开始是@keyframes,接着指定了这组关键帧的名字.在声明内部指定了一组要应用动画效果的属性.
from声明了动画样式的初始值.可以省略from,这样就会使用样式本来的属性作为初始值;to声明中定义一组设置动画样式的属性以及动画结束时这些属性的最终值.
2.1 使用关键帧
2.1.1 设置初始状态
使用from子句可以指定与元素自身属性不同的另一组初始值作为动画开始时的属性.
2.1.2 指定中间关键帧
也可以添加其他关键帧定义动画的中间阶段.这是通过添加百分数子句实现的.
1 | @-webkit-keyframes hei{ |
对于每一个百分数子句,在动画中定义了一个点,这时子句中指定的属性和值会完全应用到样式上.
中间关键帧有两个用途.一是为属性定义新的变化速率.浏览器会使用 animation-timing-function 指定的函数计算由一个关键帧移动到下一个关键帧需要的中间值,以确保关键帧与关键帧之间流畅地播放.
另外,还可以分别使用0%和100%代替from和to子句定义开始关键帧和结束关键帧.
中间关键帧的另一个用途是定义属性值,以便创建更为复杂的动画.
2.2 设置重复方向
动画结束后浏览器可以选择接下来的动画以何种方式重复.使用animation-derection 属性指定的首选方式.
animation-derection属性的值
值 | 说明 |
---|---|
normal | 每次重复都向前播放,如果可重复播放多次,每次动画都恢复初始状态,从头播放. |
alternate | 动画先向前播放,然后反方向播放,相当于animatin-iteration-count属性的值为2. |
2.3 理解结束状态
CSS动画的一个局限是关键帧为属性定义的值只能在动画中应用.动画结束后,动画元素的外观回到初始状态.
如果想让元素的外观保留动画结束时的状态,必须使用过渡.
2.4 初始布局时应用动画
跟过渡相比,动画的一个优势是可以将其应用到页面的初始布局.
1 | #box1{ |
这种情况下,页面一旦加载就会自动应用样式.这意味着浏览器一旦显示HTML就有了动画.
重用关键帧
可以对同一组关键帧应用多个动画,从而为动画属性配置不同的值.
1 | #box1{ |
box1和box2都使用了hei关键帧.他们分别有不同的动画效果.
2.5 为多个元素应用动画
可以为多个元素应用同一个动画,通过扩展选择器的范围实现.
还可以为一个元素应用多个动画,只需要用逗号将动画属性的不同名称隔开.
停止和启动动画
animaton-play-state
属性可以用来停止和启动动画.
如果这个属性的值为paused,动画就会停止.如果换成playing,动画就会开始播放.
在实际使用中,可以使用JavaScript来改变这个属性的值.
3.使用变换
可以使用CSS变换为元素应用线性变换,也就是说可以旋转、缩放、倾斜和平移某个元素.
属性 | 说明 |
---|---|
transform | 指定应用的变换功能 |
transform-origin | 指定变换的起点 |
3.1 应用变换
通过transform属性为元素应用变换.这个属性允许的值是一组预定义的函数.
属性 | 说明 |
---|---|
translate(长度值或百分数值) | 在水平或垂直方向上平移元素 |
translateX(长度值或百分数值) | 在水平或垂直方向上平移元素 |
translateY(长度值或百分数值) | 在水平或垂直方向上平移元素 |
scale(数值) | 在水平或垂直方向上缩放元素 |
scaleX(数值) | 在水平或垂直方向上缩放元素 |
scaleY(数值) | 在水平或垂直方向上缩放元素 |
rotate(角度) | 旋转元素 |
skew(角度) | 在水平或垂直方向上使元素倾斜一定的角度 |
skewX(角度) | 在水平或垂直方向上使元素倾斜一定的角度 |
skewY(角度) | 在水平或垂直方向上使元素倾斜一定的角度 |
matrix(4-6个数值,逗号隔开) | 指定自定义变换.大多数浏览器还没有实现z轴缩放,因此最后两个数字可以忽略.(有些情况必须要省略) |
1 | #box1{ |
这里指定了两个变换,一个是旋转-45度,二是沿x轴进行因子为1.2的缩放.此时,元素按照指定方式进行了旋转和放大,而页面的布局并没有因此改变.元素变换后覆盖了周围的一些内容.
3.2 指定元素变换的起点
transform-origin
属性可以指定应用变换的起点.默认情况下,使用元素的中心作为起点.
属性 | 说明 |
---|---|
% | 指定元素x轴或y轴的起点 |
长度值 | 指定距离 |
left | 指定x轴上的位置 |
center | 指定x轴上的位置 |
right | 指定x轴上的位置 |
top | 指定y轴上的位置 |
center | 指定y轴上的位置 |
bottom | 指定y轴上的位置 |
要定义起点,需要为x轴和y轴各定义一个值.如果只提供一个值,另一个值会被认为是中心位置.
1 | #box1{ |
3.3 作为动画和过渡处理
可以为变换应用动画和过渡,就跟其他CSS属性一样.
1 | #box1{ |