CSS3动画效果的实现

要实现动画效果我们需要了解一个转换属性：transform，它可以让元素在2D平面中实现各种效果，举几个例子：

transform: rotate(0deg)：实现元素的旋转效果 ，"deg"表示旋转的度数

transform: scale(x, y)：实现元素的放大和缩小，x表示宽，y表示高，

如果只写了一个参数，第二个参数就和第一个参数一致。

translate(x,y)：实现元素的移动，x为正代表向右移动，反之往左，y为正代表向下移动，反之往上。

需要注意的是：同时使用多个转换，其格式为transform: translate() rotate() scale()

接下来看动画，用的是animation属性

动画的基本使用：1先定义动画

2再调用定义好的动画

语法格式(定义动画)：

@keyframes动画名称 {

0% {

width: 100px;

}

100% {

width: 200px

}

}

语法格式（使用动画）

div {

/* 调用动画 */

animation-name: 动画名称;

/* 持续时间 */

animation-duration: 持续时间；

}