html5动画效果

这篇文章涉及到的内容有：

2d,3d的转换

过度效果

动画

多列

1.2d,3d转化

2d,3d转化是指对元素的外观进行一些操作，例如：

移动元素 旋转 缩放 倾斜 3d转换

接下来以代码来演示如何进行2d,3d平面的一些转换。

准备工作

我们先准备一个标准的html页面，并在其中添加两个相同大小的p元素，方便进行对比。

这是一个初始效果

准备改变的p

建立对应的样式表，并给两个p设置相同的样式：

p {

width: 100px;

height: 100px;

background-color: aqua;

}

在中预览(我用的是chrome浏览器)，可以看到未进行变换的效果：

移动变换：

.p2 {

/*移动效果*/

transform: translate(100px, 100px);

-webkit-transform: translate(100px, 100px); /*safari chrome*/

-ms-transform: translate(200px, 100px); /*ie*/

-o-transform: translate(200px, 100px); /*opera*/

-moz-transform: translate(200px, 100px); /*firefox*/

}

这里是为了适配各种类型的浏览器，其实属性都是一样的，translate()接受两个参数，第一个参数是x方向移动的像素，第二个参数是y方向移动的像素，可以预览效果为：

旋转

.p2 {
    /*旋转*/
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg); /*safari chrome*/
    -ms-transform: rotate(180deg); /*ie*/
    -o-transform: rotate(180deg); /*opera*/
    -moz-transform: rotate(180deg); /*firefox*/
}

旋转是通过transform中的rotate()实现的，rotate()接受一个角度参数，以deg为单位旋转指定角度，效果如下图：

我这里旋转了180度，可以看到整个p实现了翻转的效果。

缩放

.p2 {
    /*缩放 scale(width,height) 倍数*/
    transform: scale(1, 2);
    -webkit-transform: scale(1, 2); /*safari chrome*/
    -ms-transform: scale(1, 2); /*ie*/
    -o-transform: scale(1, 2); /*opera*/
    -moz-transform: scale(1, 2); /*firefox*/
}

缩放是对元素进行尺寸的放大或者缩小，通过scale(arg1,arg2)实现，scale()接受两个参数，第一个参数是对x方向放大的倍数，第二个参数是对y方向放大的倍数，这里我保持x方向不变，y方向放大两倍，可以看到如下效果：

倾斜

.p2 {
    /*倾斜 skew(x轴倾斜角度，y轴倾斜角度)*/
    transform: skew(20deg, 20deg);
    -webkit-transform: skew(20deg, 20deg); /*safari chrome*/
    -ms-transform: skew(20deg, 20deg); /*ie*/
    -o-transform: skew(20deg, 20deg); /*opera*/
    -moz-transform: skew(20deg, 20deg); /*firefox*/
}

倾斜效果通过transform属性中的skew()实现，skew()接受两个参数，一个是x轴旋转，第二个参数是以y轴方向旋转度数，我这里设置x，y方向均旋转20度，可以看到效果:

3d转换

3d转换通过transform：rotatex()和rotatey()实现，通过给定度数进行3d平面的x轴和y轴的旋转，这里不做详细介绍。

2.过渡效果

上面介绍了一些简单的变换效果，但在进行测试的时候发现变换是直接完成的，这样并不会产生动画的感觉。只有再加上过渡效果后，才会有动画效果。我们需要做的是：

1.通过使用css3，给元素添加一些效果 2.css3过渡是元素从一种样式转换成另一种样式 3.设置属性
transition:设置四个过渡属性
transition-property:过度的名称
transition-duration:多度效果所花费的时间
transiition-timing-function:过渡效果的时间曲线
transition-delay:过渡效果开始延时时间

demo部分

我们先建立一个标准的html页面，其中只包含一个p，作为我们做动画变换的对象：

效果展示

然后对p的样式进行设置：

p {
    width: 100px;
    height: 100px;
    background-color: aqua;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, transform 2s;
    transition-delay: 2s;
    -webkit-transition-delay: 2s;
}

我们设置了p的宽和高都为100px，并设置了背景颜色，接下来通过transition属性设置需要变换的属性以及变换时间，transition-delay设置延时时间为2s。接下来我们添加p的鼠标悬浮事件，当鼠标悬浮在p上时进行动画变换：

p:hover {
    width: 200px;
    height: 200px;
    transform:rotate(360deg);
    -webkit-transform: rotate(360deg);
}

当鼠标悬浮在上面时就可以看到动画效果了，这里我们设置p的宽度和高度都变为200px，并旋转360度，可以看到在鼠标悬浮在p上时，经过延时2s后，p会旋转放大，并在鼠标离开时恢复原样。

3.css3创建动画

通过css3也可以进行创建动画了，css3的动画需要遵循@keyframes规则，通过规定动画的时长以及规定动画的名称实现动画效果。光说不行，上代码！

动画效果

老规矩，还是准备一段标准的html文件，其中只包含一个p，同时建立样式表，进行样式以及动画的设定。

p {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: anim 5s;
    -webkit-animation: anim 5s;
}

这里设置p的位置为相对位置，这样好方便控制p的移动。动画部分通过animation属性设置，参数部分分别为：动画名称 动画时长 ，接下来设置@keyframe（关键帧）部分：

@keyframes anim {
    0% {
        background-color: red;
        left: 0;
        top: 0;
    }
    25% {
        background-color: blue;
        left: 200px;
        top: 0;
    }
    50% {
        background-color: #ccffcc;
        left: 200px;
        top: 200px;
    }
    75% {
        background-color: #00ffff;
        left: 0;
        top: 200px;
    }
    100% {
        background-color: red;
        left: 0;
        top: 0;
    }
}

通过设置关键帧，每个关键帧部分改变了p的位置以及背景颜色，运行起来，可以看到p运动了一个正方向。为了添加浏览器适配，我们可以设置多个关键帧，只需要在前面添加如下代码即可：

@-webkit-keyframes anim

这样的动画只能播放一次，如果想一直播放可以这样设置animation的属性：

animation: anim 5s infinite alternate;

这样就实现一个简单的css3动画效果啦。

4.多列

在css3中，可以创建多列来对文本或者区域进行布局，通过设置属性column-count,column-gap,column-rule来实现分列效果，不多说，上效果图：样式代码：

.p1{
    column-count: 3;
    -webkit-column-count: 3;
    column-gap: 50px;
    -webkit-column-gap: 50px;
    column-rule: 5px outset #ff0000;
    -webkit-column-rule: 5px outset #ff0000;
}

column-count:设置列数；
column-gap:设置列与列之间间隔；
column-rule:设置分列规则。