播放状态：

animation-play-state:paused | running

paused-running播放 则从上一次暂停位置开始播放

running-paused暂停，元素回到最原始状态。

动画播放方向：

animation-direction：normal | alternate

正叙播放 交替播放

input 设置只读方法

方法 1

<input type="text" id="defaultAddress"  name="defaultAddress" class="input" value="" onfocus=this.blur() />

 是一个输入框，用户输入文本的框就是类似于百度的搜索框    value=""说明初始为空 onfocuse="this.blur()"

onfocuse是聚焦的意思，当你把光标放在文本框上输入的时候，就是聚焦，但这里添加了"this.blur()"，

blur的作用就是去除聚焦，也就是你不能把光标放在这个文本框上，换句话说就是你不能输入文本了

 ---------- 整个代码构成了”不能输入任何文本的文本框“

方法2:readonly 

<input type="text" name="input1" value="中国" readonly=“readonly”>

<input type="text" name="input1" value="中国" readonly="true"> 

-------------- readonly可设置CSS样式 

方法3: disabled

<input type="text" name="input1" value="中国" disabled>

-------------  Disabled是按系统设置的Disabled颜色来设置前景色的，CSS对其无效

--------------------- 本文来自 田小涛 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/q718330882/article/details/16861145?utm_source=copy 

存在浏览器兼容问题

keyframes:关键桢

@keyframes 动画名称{

动画过程（百分比或者from...to...）

}

配合上animation:动画名称 持续时间 速度方式  延迟时间 无限循环

定义和用法

readonly 属性规定输入字段为只读。

只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。

readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。

readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。

语法

<input readonly="value">

CSS中每一个元素都是一个盒模型，包括html和body标签元素

column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。

所有表单元素都有enabled、disabled属性，一般默认enabled="enabled"，不会显示地去设置。

如果要设置该表单元素不可用，可以如下操作：

<input type="text" name="name1" disabled="disabled">

只要没有设置disabled="disabled"都是可用的。

要设置复选框或者单选框默认选中，可以设置checked="checked"  <input type="radio" name=name2 checked>

用户操作表单时显示选中的都会被 :checked选择器选中

selected是针对下拉菜单的，可以在<option>元素中设置selected="selected"

<select name="beans">

              <option value="House Blend">House Blend</option>

              <option value="Bolivia" selected="selected">Shade Grown Bolivia Supremo</option>

              <option value="Guatemala" selected="selected">Organic Guatemala</option>

              <option value="Kenya">Kenya</option>

用户操作表单时显示选中的option都会被 :selected选择器选中

如果暂停了动画的播放，元素的样式将回到最原始设置状态。

Chrome或Safari浏览器，需要加入-webkit-前缀！

Chrome或Safari浏览器，需要加入-webkit-前缀！

支技animation动画的只有webkit内核的浏览器，所以我需要在上面的基础上加上-webkit前缀，据说Firefox5可以支持css3的 animation动画属性。

在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。

transition-property:

过渡属性

transition-property:

过渡的CSS属性

transiton-duration：

过渡所需时间

transition-timing-function：

指过渡速度方式：

linear：以匀速过渡。

ease：慢速开始，中间快速，以慢速结束。

ease-in：慢速开始。

ease-out：慢速结束。

ease-in-out：以慢速开始和结束。

transition-delay：指定开始出现的延迟时间