知识点干货——CSS动画

CSS动画

（transition、animation）

 //2D动画
 transform:translate();      /*偏移*/
 transform:rotate();         /*旋转角度*/
 transform:scale(1,2);       /*缩放的倍数：分别表示宽，高*/
 transform:skew(xdeg,xdeg);  /*倾斜 参数分别为x轴和y轴倾斜的角度*/
 transform:matrix();     /*矩阵的效果*/
 //3D动画
 transfom:rotateX(xdeg);
 transfom:rotateY(xdeg);

 

 

过渡

transition属性

编写顺序：属性名称 过渡时间 时间函数 延迟时间

 transition:width 2s,height 2s,transform 2s;
 transition-delay:2s;        /**延时执行*/
 transition-duration:  ;         /*过渡效果花费的时间*/
 transition-timing-function: ;   /*时间函数：linear ease*/
 transition-property:    ;       /*过渡的名称*/

 

注：1、display不能和transition一起使用。

2、transition后面尽量不要跟all （占用浏览器大量的计算资源）

3、常见闪动 我们可以用 perspective 和backface-visibility

 

 

animation属性

编写顺序：name duration timing-function delay iteration-count(播放次数) direction(播放顺序) fill-mode(动画结束时候的状态);

动画名称(name)--@keyframes、 过渡时间(duration) 、

延迟时间(delay) 、 时间函数(timing-function)

 animation:动画名称 时间 infinite alternate;   
             /*写在哪个标签要执行的动画中,
             infinite 正向播放  表示动画一直执行
             alternate    表示动画轮流播放，交替执行
             reverse   反向播放
             forwards  
             是否暂停播放 running //post*/
 ​
 //写在外部
 @keyframes 动画名称{
     0%{     }
     50%{    }
     100%{   } 
 }

 

 

 

 

多列

columm-cout:列数;
 column-gap:每列的间距;
 column-rule:列线的大小 outset 颜色;
 column-width：   ;

 

 

CSS瀑布流

HTML中多个div标签，css中可以用多列的column-gap设置列的间距，还有列宽度