CSS动画属性1

大家好我是web_zhuo

CSS3增加了很多新的属性,利用这些动画属性,我们可以做出很炫酷的效果,并且节省很多jq代码,接下来大家一起学习吧

旋转: transform:rotate(?deg)

      

元素相对原点进行旋转

扭曲: transfrom:skew(?deg,?deg)  

skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）

   skewX()    只在X轴扭曲   

   skewY()    侄在Y轴扭曲  

变形伸缩放: transform:scare(x,y) 

 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

 scaleX(x)元素仅水平方向缩放（X轴缩放

 scaleY(y)元素仅垂直方向缩放（Y轴缩放）

位移:

1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

2、translateX(x)仅水平方向移动（X轴移动）

3、translateY(Y)仅垂直方向移动（Y轴移动）

备注: transform:translate(-50%,-50%); 能使得元素水平竖直居中

改变原点位置: transform-origin: x,y;

默认的原点为正中间(50%,50%)    x的值向右增加最高到100%; y的值向下增加最高到100%;

页可用top  center  left right bottom 等方向词代替

过渡属性: transition

CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

    transition-property:指定过渡或动态模拟的CSS属性

    transition-duration:指定完成过渡所需的时间

    transition-timing-function:指定过渡函数

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

    transition-delay:指定开始出现的延迟时间