变形与动画相关属性

变形与动画相关属性

CSS 3 提供的 Transition 动画

Transition 动画通过 transition 属性来指定。 transition 属性的值包括如下 4 个部分。
●transition-property: 指定对 HTML 元素的哪个 CSS 属性进行平滑渐变处理。 该属性可以指定 background-color、 width 、 height 等各种标准的 CSS 属性。
●transition-duration: 指定属性平滑渐变的持续时间。
●transition-timing-function: 指定渐变的速度。 该部分支持如下几个值。

• ease : 动画开始时较慢，然后速度加快，到达最大速度后再减慢速度。
• linear: 线性速度。动画开始时的速度到结束时的速度保持不变。
• ease-in : 动画开始时速度较慢，然后速度加快。
• ease-out: 动画开始时速度很快，然后速度减慢。

• ease-in-out: 动画开始时速度较谩，然后速度加快，到达最大速度后再减慢速度。
• cubic-bezier(x1, y1, x2, y2): 通过贝济埃曲线来控制动画的速度。该属性值完全可以代替 ease 、linear 、ease-in 、ease-out 、ease-in-out 等属性值
  ●transition-delay: 指定延迟时间，也就是指定经过多长时间的延迟才会开始执行平滑渐变。
  transition 属性可以同时指定多组 propetiy duration time-function delay 值，每组 property duration time-function delay 值控制一个属性值的渐变效果,中间用","隔开

transform该属性用于设置变形 该属性支持一个或多个变形函数
●translate(tx[,ty]) 该函数设置html元素沿X轴移动tx距离，沿y轴移动ty距离。其中中括号内 y轴设置可以省略 省略则代表ty为0
●scale(sx,sy)该函数设置html沿着X轴方向缩放比为sx，沿着y轴方向缩放比为sy。sy可以省略 默认没有缩放，即sy=1。
●rotateX（angle）该函数设置html元素绕x轴顺时针转过angle角度
●rotateY（angle）该函数设置html元素绕Y轴顺时针转过angle角度
●rotateZ（angle）该函数设置html元素绕Z轴顺时针转过angle角度
●skew(sx[,sy])该函数设置html元素沿着x轴倾斜sx角度，沿着y轴倾斜sy角度。其中sy参数可以省略 默认为0

CSS 3 提供的 Animation 动画

CSS 3 为 Animation 动画提供了如下几个属性。
●animation-name: 指定动画名称。该属性指定一个已有的关键帧定义。
●animation-duration : 指定动画的持续时间。
●animation-timing-function : 指定动画的变化速度。
●animation-delay: 指定动画延迟多长时间才开始执行。
●animation-iteration-count : 指定动画的循环执行次数。//1即循环一次；infinite 表示可无限循环
●animation : 这是一个复合属性。该属性的格式为： animation-name animation-duration animation-timing-function animation-delay animation- iteration-count , 使用该属性可以同时指定 animation-name 、 animation-duration、animation-timing-function 、animation-delay
和 animation-iteration-count 等属性。
上面属性中 animation-name 的属性值应该是一个关键帧定义，这个关键帧定义满足如下格式：

@key frames 关键帧名称{
	from | to | 百分比{
		属性 1 ：属性值 1;
		属性 2 ：属性值 2;
		属性 3 ：属性值 3;
		...
	}
	...
}

上面语法格式中， from I to I 百分比用于定义关键帧的位置，其中 from 代表开始处； to 代表动画结束帧； 百分比则指定关键帧的出现位置。 例如， 10％代表关键帧出 现在动画进行了1/ 10 时间处。一个关键帧定义可以包含多个关键帧。
定义关键帧时，不仅可以指定一个 left 属性，还可以指定多个 CSS 属性，包括前面介绍的 transform 属性，这样就可以实现更复杂的动画。例如：

@keyframs complex{
	/*定义动画开始处的关键帧*/
	0%{
		transform:rotate(0deg) scale(1);
		background-color:#f00;
	}
	/*定义动画进行40%时的关键帧*/
	40%{
		transform:rotate(720deg) scale(0.1);
		background-color:#ff0;
	}
	/*定义动画进行80%时的关键帧*/
	80%{
		transform:rotate(1080deg) scale(4);
		background-color:#f0f;
	}
	/*定义动画进行100%时的关键帧*/
	100%{
		transform:rotate(0deg) scale(1);
		background-color:#00f;
	}

鱼眼效果

当鼠标移动到指定菜单项时，该菜单项会“凸出来”，显得特别突出 。