css3中动画属性有哪些？

css3中运动属性总结笔记

2D的动画属性

什么是2D？
二维的平面空间

一、变形属性：transform

• transform:translate() 在平面进行位置的移动（单位为px）

•  transform:translate(参数1，参数2)
       参数1：在X轴移动的距离
       参数2：在Y轴移动的距离
  
   	如果要单独设置X和y的位移：
   		transform:translateX(参数);
      	 transform:translateY(参数);
      	 
       注：如果数值是正的情况下方向往右(X)和下(Y)，负值则为左(X)和上(Y)
  

• transform:rotate() 在平面进行旋转（单位为deg）

   transform:rotate(数值);
   默认情况下：绕着中心点进行转动
   
   单独设置围绕某个轴（X  Y）
   	transform:rotateX()
   	transform:rotateY()
   
   如果要改变原点我的位置就要用到这个属性：
   			transform-origin:水平方向  垂直方向
  

• transform:scale() 在平面进行缩放

   transform:scale(参数1，参数2);
   如果数值为	0 - 0.999999则是缩小 如果数值大于1则是放大
   	参数1：X轴缩放的比例 
      参数2：Y轴缩放的比例
   	
   	如果要单独设置，同样也是这样：
   		transform:skewX()
   		transform:skewY()
  

• transform:skew() 在平面进行倾斜（单位为deg）

   让图形的边在X和Y轴上面拉伸，从而改变图形的形状，造成倾斜
   transform:skew(数值);
   
   单独设置
   transform:skewX()
   transform:skewY()
  

3D的动画属性

3D的动画属性和2D相识，就是比2D多了个轴（z轴）

• 3D的位移（单位为px）

   transform:translate(x,y,z);
           translateX()
           translateY()
           translateZ(不能是百分比)
  

• 3D的旋转（单位为deg）

    transform:rotate();
        rotateX()
        rotateY()
        rotateZ()  注：默认就是围绕着z轴旋转
  

• 3D缩放

       transform:scale3d(x,y,z);
           scaleX()
           scaleY()
           scaleZ()
           
           属性和2D相识
           如果数值为	0 - 0.999999则是缩小 如果数值大于1则是放大
  

css3中关键帧的设置

animation

属性有哪些呢？

animation-name   关键帧的名称
animation-duration   动画的持续的时间
animation-timing-function   动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线）
			动画的类型：
       				 linear
       				 ease
       				 ease-in
       				 step-start  解释：没有动画中间的过渡效果。每次直接跳到下一帧开始的地方
        
animation-delay  动画的延迟
animation-iteration-count   动画运动的次数（默认情况下运动1次） infinite(无限循环)

运动方向的属性：

reverse：反方向运行 （ 让关键帧从后往前执行 ）
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行

animation-play-state 
			属性值：
    			paused暂停
    			running运动

---

制定关键帧：

    @keyframes 关键帧的名称{
        
        0%{
            开始状态
        }
        25%{

        }
        50%{

        }
        ......
        100%{
            结束状态
        }
    }

定制好了如何调用呢？

常用的写法：
		 animation:关键帧的名称  动画运动的时间  linear(匀速)  动画延迟的时间

关键帧效果的设置效果如图：

介绍就到这里，如有遗漏，欢迎大家在评论区指出！感谢阅读！