知识点干货——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设置列的间距，还有列宽度