HTML5----CSS动画+HTML5表单属性 +HTML5表单验证

CSS动画

一个完整的CSS animation由两部分组成：
1.一组定义的动画关键帧（key frame 指的是）
声明用的是***@keyframes规则***

• 描述该动画的CSS声明（animation属性）
• 使用 @keyframes规则创建动画，可以设置多个帧

基本语法规则：

@keyframes animationname{
   
             keyframe-selector{
   css-styles;}
}

注：

• animationname 表示当前动画名称，作为引用的唯一标识，所以不能为空
• @keyframes取值有：0%-100%、from、to*（to和100%表示相同效果）
• css-styles 定义当前帧关键动画

animation属性与transtion相似，也是一个复合属性（描述动画的CSS声明）
基本语法：

animation：name duration timing-function iteration-count direction fill-mode play-state

注：

• animation-name规定动画名称
• animation-duration动画完成一周期所花费时间时间（默认为0）
• animation-timing-function表规定动画速度曲线 允许取值：linear、
• animation-delay表动画开始前的延迟 以秒或毫秒，默认为0
• animation-iteration-count 指动画次数 取值：0（定义动画播放次数的数值，默认是1）、infinite（规定动画无限次播放）
• animation-direction指动画是否在下一周期 取值：normal（默认值）、alternate（动画应该轮流播放）
• animation-play-state 取值：paused(暂停）、running（默认值，表正在播放）
• animation-play-state 取值：none、forwards、backwards、both

HTML5新增表单属性

<form>标签
基本语法：

<form action="url地址" method="提交方式" name="表名称">
  各种表单控件
  </form>

action:指定并处理表单数据的服务器URL地址
method：设置表单数据提交方式 取值：get、post 默认为get

get、pose区别：

get：

1. 会在地址栏后面拼接数据，所以有安全隐患。一般从服务器获取数据，并且客户端也不用提交上面数据
2. 能够带的数据有限，1kb大小

post：

1. 数据是以流的方式写过去，不会再地址栏上面显示。现在一般提交数据到服务器使用的都是post
2. 以流的方式写数据，所以数据没有大小限制

autocomplete属性

用于指定表单是否有自动完成功能（所谓自动完成，指将表单控件输入的内容记