2D
1.CSS3过渡
IE10,Firefox,Chrome及Opera支持transition属性
Safari需要前缀-webkit-
IE9及更早的版本,不支持transition属性
Chrome25及更早的版本,需要前缀-webkit-
transition:all 2s;
transition-property 规定应用过渡的css属性的名称
none(无属性)
all(所有属性)
property(定义应用过渡效果的CSS属性名称列表,分隔)
transition-duration 定义过度效果花费时间,默认0
transition-timing-function 规定过渡效果的时间曲线,默认"ease"
transition-delay 规定过渡效果何时开始,几秒后开始 默认0
2.2D变形(以中心点为准)
transform:none|rotate|scale|skew|translate|matrix;
rotate旋转
需要先有transform-origin属性定义
transform:rotate(30deg);正数顺时针 负数逆时针
translateX translateY (x,y轴移动)
translate(100px,100px);
scale缩放
transform:scale(1,1.5) xy轴上的缩放
transform:scaleX(2);x轴缩放2倍
transform:scaleY(2);y轴缩放2倍
skew扭曲
transform-origin:x-axis y-axis;改变元素中心点
rransform-origin:left top;
3.3D效果(preserve-3d开启3d模式,perspective:800px;展示3d效果(一般800px-1200px))
3d位移
translateZ()以方框中心为原点,变大和translate3d()
3d旋转
rotateZ()以方框中心为原点,顺时针旋转
transform-style:flat|preserve-3d;
规定如何在3d空间中呈现被嵌套的元素
flat:子元素不保留其3d位置
preserve-3d:子元素保留其3d位置
perspective:800px;透视,展示3d效果(该变量在父元素和子元素下定义的视点不同)
none:无3d空间,取值越小,效果越明显
backface-visibility:visible|hidden;(反面可见|反面不可见)
4.关键帧动画
语法:@keyframes animationname{
keyframes-selector{css-styles;}
}
animationname:声明动画名称
keyframes-selector:用来划分动画的时长
animation 所有动画属性的简写属性,除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。