HTML5动画效果
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:设置分列规则。