css3动画、H5新特性

1.css3动画

1.css动画是什么
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。

CSS3 创建的动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
**CSS3 @keyframes 规则** 要创建 CSS3 动画，我们需要了解 @keyframes 规则。 @keyframes 规则是创建动画。 @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。 指定至少这两个CSS3的动画属性绑定向一个选择器： 规定动画的名称 规定动画的时长

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}
//把mySelf的动画绑定到div时长5秒
div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

注意: 须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

@keyframes 规则和所有动画属性：

使用@keyframes规则，
可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，可以更改CSS样式的设定多次。指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
0％是开头动画，100％是当动画完成。
为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。
注意: 使用animation属性来控制动画的外观，还使用选择器绑定动画。.
@keyframes animationname {keyframes-selector {css-styles;}} **css3中三个关于动画的样式属性：transform,transitions和animations** ``transform可以用来设置元素的形状改变，主要有以下几种变形：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）和matrix（矩阵变形）

css简书详细介绍

2.h5性特性

h5 每个人有每个人的理解,我的理解呢！我的理解是 h5 呢并不是新增一些标签和样式更多的是里面新增的一些功能例如重力感应，他可以让我们感知当前手机的状态，可以帮助我们完成手机摇一摇，监听当前我们步数，还有开启 3d 模式让我们的 2d 空间变成一个 3d 模式,而且 h5 中为了挺高页面性能，页面元素的变大，不在是元素本身的大小变化，而是一种视觉上的效果，从而减少了 dom 操作，防止了页面的重绘，当然 h5 中不单单是这些还有webgl 游戏引擎 canvas、svg 完成图表以及一些小游戏的开发例如大转盘，数钱游戏，jd 妈妈再打我一次等等！
H5 新特性
1.语义化标签：header、footer、section、nav、aside、article
2.增强型表单：input 的多个 type
3.新增表单元素：datalist、keygen、output
4.新增表单属性：placehoder、required、min 和 max
5.音频视频：audio、video
6.canvas
7.地理定位
8.拖拽
9.本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
10.新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
11.WebSocket：单个 TCP 连接上进行全双工通讯的协议
CSS3 新特性
1.选择器
2.背景和边框
3.文本效果
4.2D/3D 转换
5.动画、过渡
6.多列布局
7.用户界面