css 动画

2D 属性

位移

transform: translate(XXpx,XX%,XXrem);
           translateX(XXpx);
           translateY(XXpx);
           translateZ(XXpx);
           
           /*一个值:x轴偏移量*/
           /*两个值:x轴偏移量 y轴偏移量*/
           /*三个值:x轴偏移量 y轴偏移量 z轴偏移量(z轴偏移量不能用 %)*/
  • 根据自身在标准流中的位置进行移动,移动后仍然占位,单位可以是 px 或 相对自身 %
  • 设置百分比会根据自身的宽和高计算,配合定位可实现元素页面居中
  • 水平正值向右,负值向左
  • 垂直正值向下,负值向上

旋转

transform: rotate(-180deg);     /*2D旋转*/
           rotatex(-180deg);    /*沿 x 轴3D旋转*/
           rotatey(-180deg);    /*沿 y 轴3D旋转*/
           rotatez(-180deg);    /*沿 z 轴3D旋转*/

transform-origin: top center XXpx;
                  /*一个值:x轴偏移量 (XXpx,XX%,center...)*/
                  /*两个值:x轴偏移量 y轴偏移量 (XXpx,XX%,center...)*/
                  /*三个值:x轴偏移量 y轴偏移量 z轴偏移量 (z轴偏移量只能用 XXpx)*/
  • 沿 z 轴,顺时针为正值,逆时针为负值
  • 沿 x 轴,从右侧看,顺时针为正值,逆时针为负值
  • 沿 y 轴,从下方看,顺时针为正值,逆时针为负值
  • 旋转和位移同时存在时,用空格隔开,先写位移后写旋转

缩放

transform: scale(XX, XX);
            /*水平缩放系数 垂直缩放系数*/

斜切

transform: skew(XXdeg, XXdeg);
              /*水平角度 垂直角度*/

背对屏幕不可见

backface-visibility: hidden;

3D 属性

开启 3D 空间

transform-style: preserve-3d;
  • 给需要使用 3D 显示效果元素的父元素设置次属性

景深透视效果

perspective: XXpx;
  • 设置该值后,子元素会出现近大远小的效果
  • 最佳效果取值范围为 800px ~ 1500px

过渡

  • 过渡使元素样式改变时,有一个中间过程(至少有过渡的属性和过渡时间才能出现动画效果)

复合属性

transition: 属性 时间 类型 延迟;  /*多组值逗号隔开*/
  • 复合属相的参数顺序没有特定要求,但延迟必须在过渡时间之后,通常过渡的属性写开头
  • 过渡添加的位置根据具体场景确定(添加至元素本身或者 hover 状态下)

过渡的属性

transition-property: all;
                     none;
                     width/height/background-color/left/opacity...

持续时间

transition-duration: 2s;    /*单位秒或毫秒*/

动画类型

transition-timing-function: linear;        /*线性过渡,cubic-bezier(0.0, 0.0, 1.0, 1.0) */
                            ease;          /*平滑过渡,cubic-bezier(0.25, 0.1, 0.25, 1.0) */
                            ease-in;       /*由慢到快,cubic-bezier(0.42, 0, 1.0, 1.0) */
                            ease-out;      /*由快到慢,cubic-bezier(0, 0, 0.58, 1.0) */
                            ease-in-out;   /*由慢到快再到慢,cubic-bezier(0.42, 0, 0.58, 1.0) */

贝塞尔曲线可视化:https://cubic-bezier.com/

延迟时间

transition-delay:  1s;    /*单位秒或毫秒*/

动画属性

复合属性

amimation: NAME TIME METHOD DELAY REPLAY DIRECTION;
         /*名称  时间  方式    延时  次数    方向*/

关键帧区间

@keyframes NAME{
    from{
        
    }
    to{
    
    }
}
@keyframes NAME{
    %0{
    
    }
    50%{
    
    }
    100%{
    
    }
}

动画外属性

animation-fill-mode: both;     /*开始前位于 from 位置,结束后停留在 to 位置*/
                     backwards; /*开始之前位于 from 位置*/
                     forwards;  /*结束之后停留 to 位置*/
  • 定义动画开始之前和结束之后的位置

动画名称

animation-name: NAME;

动画持续时间

animation-duratioin: XXs;
  • 单位可以是秒或毫秒

动画过渡方式

animation-timing-function:  step(NUMBER);
                            linear;   /*匀速*/ 
                            ease;    /*平滑过渡*/ 
                            ease-in  /*由慢到快*/ 
                            ease-out  /*由快到慢*/ 
                            ease-in-out  /*由慢到快再到慢*/
                            cubic-bezier(n,n,n,n)  /*cubic-bezier 函数*/ 

动画状态

animatioin-play-state: running;  /*执行动画效果*/
                       paused;   /*暂停*/       

动画延时

animation-delay: XXs;

动画循环次数

animation-iteration-count: infinite;

动画方向

animation-direction: normal;               /*正常*/
                     reverse;              /*反向*/
                     alternate;            /*有来有去*/
                     alternate-reverse;    /*反向有来有去*/