CSS3中（2D、3D、动画）重点整理

1.过渡
transition-property ：
指定参与过渡动画的属性（并不是所有的属性都可以动画）
transition-duration:
指定过渡动画的时间（0也要带单位s）
transition-timing-function:
指定过渡动画的形式（贝塞尔曲线等）
transition-delay:
指定过渡动画的延迟，单位s
*transition过渡简写属性：第一个可以被解析成时间的值会赋给transition-duration。

2.2D变换（transform）
（1）transform: rotateX(360deg); 旋转,单位deg（度数）
（2）transform: translateX(300px); 2D平面平移,单位px（像素）
（3）transform: scale(1.5); 括号内填写缩放倍数，可带小数点
（4）transform-origin:center; 基点的变换
（5）transform: skewX(10deg); 斜切单位deg（度数）
引申的3D
rotate3d() = rotate3d(<number>,<number>,<number>,<angle>)
translate3d() = translate3d(<translation-value>,<translation-value>,<length>)
transform-origin: center center -50px;

3D变换
景深：perspective: 200px; 单位px
构建3D舞台，决定用户的肉眼距离屏幕的水平距离！使3D变换的元素具有近大远小的感觉，景深是不可继承属性，作用于所有的后代元素。
景深越大，灭点越远，元素变形越小
景深越小，灭点越近，元素变形越大
构建3D舞台：transform-style: preserve-3d;
，使3d舞台有层次感, 是一个不可继承属性，他只作用于子元素
隐藏元素背面：backface-visibility：hidden；

css3动画基础
animation-name：代表关键帧的名字

animation-duration：一个动画周期的时长

animation-timing-function：作用于一个关键帧周期而非整个动画周期

animation-delay：代表动画的延迟（这是一个动画外的属性，单位s）

animation-iteration-count：循环关键帧的次数！（只会管理动画内的属性，动画的延迟不会被循环）

animation-direction：改变关键帧的执行方向，还会影响animation-timing-function的形式
animation-fill-mode：管理所有动画外的状态！
什么是动画外的状态？
from之前（可理解为animation-delay之前）
to之后
值
none : 动画外的状态保持在动画之前的位置
backwards ：from之前的状态与from的状态保持一致
forwards ：to之后的状态与to的状态保持一致
both ：动画外的状态与from和to的状态保持一致
animation-play-state：管理动画的运行和停止，可用于hover，移入即停。
关键帧：@keyframes move{
0% {
transform: translateY(-100px);
}
50% {
transform: translateY(0px);
}
100%{
transform: translateY(100px);
}
}
*move为自定义的关键帧名称（animation-name），keyframes-selector可以是关键帧form（0%）和to（100%），可以是百分，代表的是时间的百分比（时间点）

 

2018-09-2620:27:14