多列:
1、分割列
?属性：column-count:
??值:数字；
2、列间隔;
????属性：column-gap:
????值：（10px,1em）px单位
3、列规则
???column-rule:width ?style ?color;
1、转换：
1、什么是转换：变形
2、属性
1 ?、transform
???值：none
???????2、transform-function ?
注意：一个或多个函数中间用加空格
3、转换原点
属性：transform-orgin；
默认情况下，转换原点在元素的中心点
取值：
1）value1 value2;(value1:x轴位置，value2:y轴上的位置)
2）value1 value2 value3(value3：z轴上面的位置)
3）取值单位：1、px;2、(0%，0%) 3、left,right,bottom,top，center(关键字)
2、2D转换
位移（可能会覆盖其他元素）
属性：transform
值：函数：translate(x)；一个值默认的y轴移动的距离为0
?????????translate(x，y)
?????????translateX(x)
?????????translateY(y)
单位：1、px;2、百分比3、负数
???????缩放：改变元素的大小
????????属性：transform
????????值:scale()
????????参数：scale(value);
??????????????Scale(x,y);
??????????????scaleX(x);
??????????????scaleY(x);
????????注意：一个参数，默认第一个参数和第二个参数相等；
?????????X:x轴上的缩放比例
?????????Y:Y轴上的缩放比例
取值：默认：1
?????缩小范围0-1之间
?????放大范围大于1；
旋转:（1、除了行元素都可以；2、原点选择）
属性：transform
取值：rotate()
单位：deg(度数)
N转换的角度（整数：顺时针旋转；负数：逆时针旋转）
??倾斜：属性:transform
?????????值：skew();
????????????skew(xdeg);
????????????skew(xdeg,ydeg);
????????????skewX(xdeg);
????????????skewY(ydeg);
注意：
skewX(xdeg)：最终效果改变y轴的倾斜角度（逆时针）；
skewY(ydeg)：最终效果改变x轴的倾斜角度（顺时针）；
3、3D转换：
1、3D:空间距离-空间轴-z轴
?2、 空间距离：
1）属性：perspective
浏览器兼容性：属性加浏览器前缀；
2）作用：定义人眼到3D投射面的平面距离
定义位置：该属性（perspective）要定义在要实现3D转换（儿子）元素的父元素上
1、位移：
属性和函数（transform：translate()）
??????????translatex(x); ?translate(x,y); ??translatey(y) ; ?translatez(z) ?translate3d(x,y,z);
2、旋转
属性：transform
函数：rotate()
1、rotateX(xdeg);
2、rotateY(ydeg);
3、rotateZ(zdeg);
4、rotate3D(x,y,z,ndeg);(x,y,z为0，三个轴不参与旋转，
（0,0,1，ndeg）z轴参与旋转)；
transform:rote3D(1,1,1,45deg)= rotateX(45deg); rotateY(45deg); rotateZ(45deg);
2、过渡：
1、什么是过渡：过渡（transition）,使css属性值，在一段时间内平滑过渡，能观察到变化的过程和最后呈现的结果；
2、过渡要素和属性
属性：transition-property
取值：1、none
?????2、all
?????3、property
Eg: transition-property:background; transition-property:width;
可以设置的过渡属性：1、颜色，数值，转换属性：transform，渐变，阴影，
3、过渡时长
作用：过渡发生的时间
属性：transition-duration
取值：数字（单位：s/ms）
1s=1000ms
注意：该属性默认值为0，不发生过渡，所以一定要设置过渡时间；
4、过渡速度时间曲线函数
属性：transition-timing-function
function取值：1、ease ：默认值，慢速开始，中间快速，慢速结束；
????????????????2、linear:匀速；
????????????????3、ease-in:慢速开始，加速效果；
????????????????4、ease-out:快速开始，减速效果；
????????????????5、ease-in-out:慢速的开始和结束，中间先加速再减速
5、过渡延迟：
??1、作用：当用户激发过渡效果，等待多长时间后开始显示过渡效果；
2、transition-delay:
??取值：数字s/ms;
?默认值：0s;
3、触发过渡
1、:hover(鼠标滑过)
2、:active(点击链接)
3、:focus
4、js
transition：property(元素属性) ?duration(过渡时长) ?timing-function(过渡时长函数) ?delay(过渡延迟时间) ；
动画：
动画：（使元素从一种状态转变为另一种状态的形式）
完成动画的步骤：
1、声明一个动画
要求：在特定的时间点上设置动画的样式；
?????时间点：
?????样式：元素的样式
2、调用动画：
属性调用animation，调用动画；
并设置动画播放的时间，次数等等；
3、怎么去声明动画：
@keyframes 动画名称{
?0%|from{
??????动画初始样式
}
….
50%{
??设置新的动画样式
}
100%|to{
???动画结束时设置元素新的样式
}
}
注意：兼容性（@-webkit-keyframes 动画名称{} ??@-moz- keyframes 动画名称{}）
4、动画调用:
1、指定调用动画的，名称：
属性：animation-name
2、调用动画所需要的周期时间：
属性：animation-duration（s/ms）
3、设置动画完成的时间曲线函数：
animation-timing-function( ease ?linear ?ease-in ?ease-out ?ease-in-out)
4、动画延迟：
animation-delay(s/ms)
5、动画播放的次数：
属性：animation-iteration-count
1、数值
2、infinite循环
6、动画播放的方向
属性：animation-direction
取值：1、默认正向播放（0%-100%）,normal;
2、verse,逆向播放（100%-0%），
3、奇数偶数播放，alternate，奇数（正向播放）偶数（逆向播放）
7、综合属性：animation:name(名称)duration（时间）delay(动画延迟时间)timing-function（曲线函数）teration-count direction;
css动画
原文地址：https://www.cnblogs.com/nnnyifang/p/8794717.html