过渡：过渡效果一般由浏览器直接改变元素的CSS属性实现的
| 属性 | 说明 |
| transition-delay | 过渡开始之前的延迟时间 |
| transition-duration | 过渡的持续时间 |
| transition-property | 指定应用过渡的属性 |
| transition-timing-function | 过渡期间计算中间值的方式 |
| transition | 在一条声明中指定所有过渡细节的简写属性 |
使用过渡：在指定多个过渡应用属性时，过渡属性值用逗号隔开，这样过渡效果才会出现，可以为延迟时间和持续时间指定多个值，它代表的意思是不同的属性在不同的时间点开始过渡，且持续时间不同
| 属性 | 说明 |
| ease | 慢速开始，接着加速，然后慢速结束的过渡效果（默认值） |
| linear | 以相同的速度开始至结束的过渡效果 |
| ease-in | 慢速开始 |
| ease-out | 慢速结束 |
| ease-in-out | 慢速开始，慢速结束 |
动画：本质上是增强的过渡，可以具有更多的选中和控制以及灵活性
语法一：@keyframes 关键帧名{
from{
起始样式属性值
}
to{
结束样式属性值
}
}
语法二：@keyframes 关键帧组名{
0%{
样式属性
}
50%{
样式属性
}
100%{
样式属性
}
}
| 属性 | 说明 |
| animation-delay | 指定动画开始之前的延迟时间 |
| animation-direction | 指定动画循环播放的时间和是否反向播放过渡的持续时间取值normal或alternate |
| animation-duratin | 指定动画播放的持续时间 |
| animation-iteration-count | 指定动画的播放次数，取值infinite或数值 |
| animation-name | 指定动画的名称 |
| animation-play-state | 允许动画暂停和重新播放，取值running或pause的 |
| animation-timing-function | 指定动画期间计算中间值的方式，确定动画播放速度的变化 |
| animation | 动画属性的简写 |
语法： animation：关键帧组名 持续时间 动漫速度 延迟时间 播放次数
平移和缩放变换：
变换：使元素改变形状，尺寸和位置的一种效果，css能够对元素进行移动、缩放、旋转或扭曲
| 属性 | 说明 |
| transform | 指定应用的变换功能 |
| transform-origin | 指定变换的起点 |
| 属性 | 说明 |
| translate（<长度值或百分数值>） | 指定在水平和垂直方向平移元素 |
| translateX（<长度值或百分比数值>） | 指定在水平方向上平移元素 |
| translateY（<长度值或百分数值>） | 指定在垂直方向上平移元素 |
| scale（<数值>） | 在水平和垂直两个方向上缩放元素（大于1放大，小于1缩小） |
| scaleX（<数值>） | 在水平方向上缩放元素（大于1放大，小于1缩小） |
| scaleY（<数值>） | 在垂直方向上缩放元素（大于1放大，小于1缩小） |
| rotate（<角度>） | 旋转元素 |
| skew（<角度>） | 在水平和垂直两个方向上使元素倾斜一定的角度 |
| skewX（<角度>） | 在水平方向上使元素倾斜一定的角度 |
| skewY（<角度>） | 在垂直方向上使元素倾斜一定的角度 |
| matrix（4~6个数值，逗号隔开） | 之定义变换 |
| 属性 | 说明 |
| % | 指定元素X轴或Y轴的起点 |
| 长度值 | 指定距离 |
| left | X轴上的位置 |
| center | X轴上的位置 |
| right | X轴上的位置 |
| top | Y轴上的位置 |
| center | Y轴上的位置 |
| bottom | Y轴上的位置 |
旋转和倾斜变换：css旋转依靠角度变换，使用正值围绕元素中心顺时针旋转，负值逆时针旋转，使用transform-origin属性指定旋转变换的起点，默认状态以中心状态为起点
| 属性 | 说明 |
| deg | 角度（degrees） |
| grad | 梯度（gradians） |
| rad | 弧度（radians） |
| turn | 转、圈（turns） |
1408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
