CSS3网页动画

CSS3网页动画

概要：CSS3变形是一些效果的集合

如：平移、旋转、缩放、倾斜效果

每个效果都可以称为变形（transform）他们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。

网页中能够实现的动画：动态图、flash、JavaScript

1. transform:[transform-function];

1>translate();平移函数

translate(tx,ty);X轴Y轴的偏移量；

translateX(tx)；X轴的偏移量

translateY(ty);Y轴的偏移量

2>scale(sx,sy);X轴Y轴缩放倍数

scaleX(sx);X轴缩放倍数

scaleY(sy);Y轴缩放倍数

eg：transform:scale(1.5,1.5);

3>skew(ax,yx);X轴Y轴倾斜度

skew(ax);X轴倾斜度

skew(yx);Y轴倾斜度

eg：transform:skew(20deg,30deg);

4>rotate(a); 单位deg;a取正元素相对原来中心顺时针旋转，只旋转不变形。

2. transition过度

注：使用transition实现过渡动画的使用步骤：

在默认样式中声明元素的初始状态样式。

声明过渡元素最终状态样式，如悬浮状态。

在默认样式中通过添加过渡函数，添加一些不同的样式。

呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

CSS3transition的过渡功能更像是一种“黄油”通过一些CSS的简单动作触发样式平滑过渡。

transition:[transition-property  transition-duration  transition-timing-function  transition-delay]

动态模拟  周期时间  过度函数  延迟时间

定义转换动画的CSS属性名称

1>transition-property：； IDEM:指定css属性(width、height、background-color属性等)；

all指定所有的元素支持transition-property属性的样式。

eg：transition-property:width:30px;

2>transition-duration: ； 单位s (秒)；过渡所需时间。

eg :transition-duration:2s;

3>transition-timing-function:； 过度动画函数。

指定浏览器的过渡速度，以及过渡期间的操作进展情况 ，通过给过渡添加一个函数来指定动画的快慢方式。

ease;速度由快到慢（默认值）

linear;速度恒速（均匀速度）

ease-in;速度越来越快（渐显效果）

ease-out;速度越来越慢（渐隐效果）

ease-in-out;速度先加速再减速（渐显渐隐效果）

3. 伪类触发

：hover

：active

：focus

：checked

媒体查询：通过@media属性判断设备的尺寸，方向等

JavaScript触发：用JavaScript脚本触发

4.设置关键帧

语法：

 @keyframes IDENT{   /*第一种写法*/

   from{/*CSS样式*/}

   percentage{/*CSS样式*/}

   to{/*CSS样式*/}

 }

 @keyframes spread{  /*第二种写法*/

   0%{width:0;}

   33%{width:23px;}

   66%{width:46px;}

   100%{widht:69px;}

 }