css3知识点03—变换+动画

一、变换 transform

1、移动

语法：transform：translate(x , y);

• translateX(数值+单位)  水平移动、
• translateY(数值+单位)  垂直移动

  transform:translate(150px,150px) ;
              /* 斜着走 */
  transform: translateX(500px);
              /* 往左右走 */
  transform: translateY(500px);
              /* 往上下走 */

2、旋转

语法：transform： rotate(数值+deg);

• rotateX(数值+角度deg)  绕x轴旋转
• rotateY(数值+deg) 绕y轴旋转
• rotateZ(数值+deg) 绕z轴旋转

perspective 透视（如果想看到3D效果，可以给父元素加该值。数值不宜过大）

transform: rotateY(90deg);

3、缩放

语法：transform:scale(x , y);

• scaleX(数值)  水平缩放
• scaleY(数值)  垂直缩放
• scale(数值)  一个值时是等比例缩放

  transform: scale(1.1);
              /* 等比例缩放 */
  
  transform: scaleY(2); 
              /* 上下缩放 */
  transform: scaleX(2); 
              /* 左右缩放 */
  
  transform: scale(1.1,0.5); 
              /* x轴y轴 */

4、扭曲

语法：transform:skew(数值+deg);

• skewX(数值+deg)   x方向扭曲
• skewY(数值+deg)  y方向扭曲

  transform: skewX(90deg);

5、变换基点

语法：transform-origin:;

• 默认  变换基点在中心  center center
• 值：  x值    y值

    transform-origin: top center;
              /* 定义基点 */

6、缩写

语法：transform ： translate(值 )    rotate(值)    scale(值)    skew(值)

二、自定义动画

1、关键帧

（1）@keyframes  动画名称{
    from{
        属性名 : 属性值;
    }
   to{
        属性名 : 属性值;
   }
}

@keyframes myrun{
				from{
					transform: translate(0,0);
				}
				to{
					transform: translate(800px,500px);
				}
			}

（2）@keyframes  动画名称{
    0%{
        属性名 : 属性值;
    }
    50%{
        属性名 : 属性值;
     }
  100%{
        属性名 : 属性值;
   }
}

@keyframes myrun{
				0%{
					transform: translate(0,0);
				}
				100%{
					transform: translate(800px,500px);
				}
			}

2、动画名称

语法：animation-name:;

animation-name: myrun;

3、动画持续时间

语法：animation-duration:;

4、动画速度

语法：animation-timing-function:;

值：

• ease 默认 逐渐变慢
• linear 匀速
• ease-in  加速
• ease-out 减速
• ease-in-out先加速后减速
• cubic-bezier(x1,y1,x2,y2) 贝塞尔曲线
• steps(数值) 阶跃

5、动画延迟时间

语法：animation-delay:;

6、动画次数

语法：animation-iteration-count:; 

值：

• 默认  播放1次
• infinite  无限次

7、动画方向

语法：animation-direction:; 

值：

• normal  默认 正向单向播放
• reverse  反向单向播放
• alternate 来回播放
• alternate-reverse  倒着来回播

8、动画播放状态

语法：animation-play-state:; 

值：

• running  播放
• pause  暂停

9、缩写

语法：animation : an-name值    an-duration值    an-timing-function值    an-delay值   an-iteration-count值     an-direction值