css3特性和动画

一、css3的变化

transform变化的属性:

1. 2d平移 

 transform: translateX(20px); 

    /* translateX(X轴要移动的距离) */

transform: translateY(20px); 

    /* translateY(Y轴要移动的距离) */

transform: translate(20px,20px); 

    /* translate(X轴要移动的距离,Y轴要移动的距离) */

2. 2d缩放

transform: scaleX(倍数) (水平方向缩放)

transform: scaleY(倍数); (垂直方向缩放 )

transform: scale(倍数); (表示水平方向和垂直方向都使用指定的倍数进行缩放)

3. 2d旋转

transform: rotateX(x旋转角度);
transform: rotateY(y旋转角度);
transform: rotate(角度); (x轴y轴都旋转)
//设置旋转的中心点
transform-origin: x轴坐标 y轴坐标;

二、css3的动画

1. 过渡动画效果

当盒子某个属性发生变化时 ，正常都是直接完成的，我们看不到变化的过程，用过渡动画我们就可以看到变化的过程了

有的属性是没有过渡效果的，例如：display,background.....

/* 过渡的属性 */
transition-property: bottom;
/* 过渡的时长 */
transition-duration: 3s;
/* 速度效果：ease ease-in ease-out ease-in-out linear 贝塞尔曲线 */
transition-timing-function: cubic-bezier(.25,.92,.66,.11);
/* 设置动画延迟时间 */
transition-delay: 2s;
/* 综合写法 */
/* 过渡效果 */
/* transition: bottom 2s; */