CSS3中的动画

开发工具与关键技术：DW CSS

撰写时间：2021/6/8

动画的简介：动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

1.@keyframes 规则：@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

也可以改变位置和背景色：

2.css3动画属性：下面的表格列出了 @keyframes 规则和所有动画属性：

运行名为 myfirst 的动画，其中设置了所有动画属性：

也有简写的方式：

3.css3动画中的transformtransform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋 转、缩放、移动或倾斜。

2D Tran sform 方法：

①旋转 rotate(n)

旋转函数 rotate()通过指定的角度参数使元素相对原点进行旋转； n 为参数，用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋 转；如果为负，逆时针旋转。例如：

②扭曲 skew()

元素倾斜显示，将对象以其中心位置围绕着 X 轴和 Y 轴按照一定的角度倾斜。

3 种使用情况：skew(x,y)元素同时在水平方向和垂直方向扭曲；

skewX(x)元素仅在水平方向扭曲；skewY(y)元素仅在垂直方向扭曲；

例：

③缩放 scale()--让元素根据中心原点对对象进行缩放。

3 种使用情况scale(x,y) 使元素水平方向和垂直方向同时缩放：scale(x,y) 使元素水平方向和垂直方向同时缩放；scaleY(y) 元素仅垂直方向缩放；

注意：scale()的取值默认为 1，当值设置为 0.01 到 0.99 之间的任何值，作用使一个元素缩小；而任何大于等于 1.01 的值，作用让元素放大。

④ 位移 translate——元素向指定的方向移动；

3 种情况：translate(x,y)水平方向和垂直方向同时移动；

translate(x,y)水平方向和垂直方向同时移动；

translateY(y)仅垂直方向移动；

以上就是css3动画的内容！