css3的动画特性

一、css3新增background-clip 属性

1.设置背景色:background-color

2.设置背景图片:background-image

3.设置背景图片重复:background-repeat

4.置背景图像是否固定或者随着页面的其余部分滚动:background-attachment

5.设置背景图片的位置background-position

6.background-size: auto || <length> || <percentage> || cover || contain

7.background-clip:border-box || padding-box || content-box(新增属性:)

  .text {

      font-size: 40px;

      text-transform: uppercase;

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;

   }

@-webkit-keyframes hue {

  from {

    -webkit-filter: hue-rotate(0deg);

  }

  to {

    -webkit-filter: hue-rotate(-360deg);

  }

}



二、css3的Filter

filter: none | <filter-function > [ <filter-function> ]* 

grayscale灰度

sepia褐色(求专业指点翻译)

saturate饱和度

hue-rotate色相旋转

invert反色

opacity透明度

brightness亮度

contrast对比度

blur模糊

drop-shadow阴影



三、css3制作动画的几个属性

变形(transform)

 transform: rotate | scale | skew | translate |matrix;

1.rotate 

2D(2D旋转)

未定义transform-origin,则以元素中心点为旋转基点

  transform:rotate(30deg) 顺时针30度

transform:rotate(-30deg) 逆时针30度

3D(3D旋转)

rotateX(a)、rotateY(a)、rotateZ(a)

a指的是旋转的角度,可正直可负值

rotate3d(x,y,z,a)

x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;

y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;

  z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;

  a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。

  -webkit-transform:rotateX(45deg);

  -webkit-transform:rotateY(45deg);

  -webkit-transform:rotateZ(45deg);

-webkit-transform:rotate3d(0.6,1,0.6,45deg);


2.scale

2D scale(2D缩放)

scale(X,Y)是用于对元素进行缩放,transform:scale(2,1.5);如果Y未设置,则与X的默认相同。

3D scale(3D缩放)

scale3d(sx,sy,sz)

sx:横向缩放比例;

  sy:纵向缩放比例;

  sz:Z轴缩放比例;

scaleZ(s)

s:指定元素每个点在Z轴的比例。

scaleZ()和scale3d()函数单独使用时没有任何效果,需要配合其他的变形函数一起使用才会有效果

-webkit-transform: scaleZ(5) rotateX(45deg);

3.skew

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

transform:skew(30deg,10deg)


4.translate

2D translate 位移

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

translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)

3D translate 位移

translate3d(tx,ty,tz)

  tx:代表横向坐标位移向量的长度;

  ty:代表纵向坐标位移向量的长度;

  tz:代表Z轴位移向量的长度。此值不能是一个百分比值,如果取值为百分比值,将会认为无效值。

当z轴值越大时,元素也离观看者更近,从视觉上元素就变得更大;反之其值越小时,元素也离观看者更远,从视觉上元素就变得更小。

-webkit-transform: translate3d(30px,30px,200px);

translateZ(t)

t:指的是Z轴的向量位移长度。

-webkit-transform: translateZ(200px);


过渡(transition)

transition : 

<'transition-property'> 

<‘transition-duration'>

<‘transition-timing-function'>

<'transition-delay'> 

1.transition-property

当元素其中一个属性改变时执行transition效果

color,length,percentage,inerger,number,transform,rectangle,visibility,shadow,gradient,paint server (SVG),space-separated list of above,a shorthand property

2.transition-duration

transition-duration是用来指定元素 转换过程的持续时间

3.transition-timing-function

ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>

cubic-bezier(n,n,n,n)贝塞尔曲线 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4.transition-delay

transition-delay是用来指定一个动画开始执行的时间


动画(animation)

-webkit-animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名*/

 -webkit-animation-duration: 10s;/*动画持续时间*/

 -webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/

 -webkit-animation-delay: 2s;/*动画延迟时间*/

 -webkit-animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/

 -webkit-animation-direction: alternate


你可能感兴趣的:(css3的动画特性)