HTML动画效果

我们在页面上总能看的很多的很有趣的动态效果,而这些动态效果 仅用我们的html css代码便可实现,以前来讲，3D动画拿到网页上展示是一件非常奢侈的事情,HTML5的出现，让实现网页3D动画变得非常简单，当然前提是你不要再使用像IE678之类的浏览器了,下面我大致上为大家介绍一些html 和 css的基础标签

动画
使用动画流程

• 1: 执行动画 @keyform
• 2: 执行动画 animation
  2D
  transform 将元素应用 2D 或 3D 转换。

translate()

• 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
  rotate()
• 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
  实例
• 例如：值 rotate(30deg) 把元素顺时针旋转 30 度。

scale()

• 值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

skew()

• 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
• 实例：值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

matrix() 六个函数和

3D
应用场景；实现酷炫效果；在实际开发中；一般不会用到；如果有需要；用的都是第三方库

translate3d(x,y,z) 定义 3D 转化。

动画是使元素从一种样式逐渐变化为另一种样式的效果。

可以改变任意多的样式任意多的次数。

需用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，所以应该始终定义 0% 和 100% 选择器。