css3动画属性(css3的新增属性)

css3动画属性

1、animation-name特点
animation-name特点：界说动画称号，用于指定由规矩界说的动画的一个或多个称号。
注：animation-name特点必须与规矩@keyframes合作使用，由于动画称号是由@keyframes界说声明的，假如供给多个特点值用逗号隔开。
@keyframes规矩相当于一个命名空间，后面跟一个名词，假如在class中的animation-name界说了与之对应的name就能够履行动画。
2、animation-duration特点
animation-duration特点用于指定履行一个周期动画应该花多长时刻。
时刻以秒或毫秒指定，并且开端设置为“0”，这意味着动画即时产生；咱们能够指定一个持续时刻或多个以逗号分隔的持续时刻。
3、animation-timing-function特点
animation-timing-function特点是用来设置播映方式的，它能够指定定时函数，该函数界说动画对象随时刻的速度。它描述了动画在其持续时刻的一个周期内怎么进展，答应它在其过程中改动速度。
取值如下：
ease：缓解作用，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔。
linear：线性作用，速度将从开端到完毕安稳。
ease-in：渐显作用，动画将缓慢发动，然后获得更多加快并安稳到持续时刻完毕。
ease-out：渐隐作用，动画将快速发动，然后减速并安稳到持续时刻完毕。
ease-in-out：渐显渐隐作用，它是组合了ease-in和ease-out。动画或过渡将开端缓慢，在中间加快，然后减速直至完毕。
step-start：立刻跳转到动画完毕状况，动画或过渡将突然变为完毕状况并保持在该位置直到动画完毕。
step-end：动画或过渡保持其开端状况，直到动画履行完毕，直接跳转到其动画完毕状况。
step([,[start | end]])：
step()能够将转换的持续时刻划分为持平大小的距离；或指定输出百分比的改变是产生在距离的开端还是完毕。
第一个参数number为指定的距离数，即把动画分为n步阶段性显现，第二个参数默认为end，设置最终一步状况，start为完毕时的状况，end为开端时的状况，若设置与animation-fill-mode的作用抵触，以animation-fill-mode的设置为动画完毕状况。
cubic-bezier(,,,)：特别的立方赛贝尔曲线作用
4、animation-delay特点
animation-delay特点：界说动画何时开端（开端时刻），它答应动画在应用后的某个时刻开端履行，或许在应用之前看似现已开端履行一段时刻。
初始值为“0”，这意味着动画将在应用于元素后立即开端播映。正时刻值表明偏移量，该偏移量界说动画开端之间（通过动画特点将动画应用于元素时）与开端履行时的推迟时刻。
咱们还能够为animation-delay供给负值。负值，就像’0’相同，意味着动画一旦被应用，就会立即履行，可是由推迟的绝对值主动推进，就好像动画在曩昔现已发动了指定的时刻，并且它好像现已在其游戏周期的半途开端了。例如，假如为animation-delay供给“-2S”的值，动画将立即发动，只要它被应用，但它将显现为它现已发动2s之前，你现已应用它。
5、animation-iteration-count特点
animation-iteration-count特点：用于指定动画中止前播映动画循环的次数，即：播映次数。
初始值为“1”，表明动画将自始至终播映一次；通常会取“infinite”值，表明无限循环播映。

css3的新增属性

css便是层叠样式表，是一种用来体现HTML或XML等文件样式的计算机语言。而css3便是最新的 CSS 标准。只要我们能把握了css、css3的各种样式特点，信任我们随心制作漂亮大方的页面都是不在话下的。
css3新特点：
一、RGBA和透明度
RGBA是RGB颜色模型的一个扩展。在本质上看也是为设置的元素增加了一个 alpha 通道，即除了红绿蓝三种颜色外还增加一个代表透明度的通道，其中 RGB 值别离表示赤色、绿色、蓝色，而 alpha 取值则为 0 到 1 （小数位一位）。
二、background特点
background-image：设置元素的背景图画。
background-origin：规矩背景图片的定位区域。
background-size ：规矩背景图片的尺度。
background-repeat：设置是否及怎么重复背景图画。
三、word-wrap特点
word-wrap 特点允许长单词或 URL 地址换行到下一行。
注：所有主流浏览器都支持 word-wrap 特点。
根底语法：
word-wrap: normal|break-word;
四、text-shadow特点
text-shadow 特点：向文本设置暗影。
text-shadow根底语法：
text-shadow： 5px 5px 5px #FF0000;
参数别离表示：水平暗影，垂直暗影，含糊间隔，暗影颜色；
五、font-face特点
font-face特点：界说自己的字体
在新的 @font-face 规矩中，您必须首要界说字体的称号（比如 myFirstFont），然后指向该字体文件。
六、border-radius特点
border-radius 特点：是一个简写特点，用于设置四个 border-*-radius 特点。
根底语法：
border-radius: 1-4 length|% / 1-4 length|%;
注：该特点允许您为元素增加圆角边框！
七、border-image特点
border-image：将图片规矩为围住 div 元素的边框
border-image根底语法：
border-image: url(border.png-600) 30 30 round
八、box-shadow特点
box-shadow特点：向框增加一个或多个暗影。（盒暗影）
box-shadow根底语法：
box-shadow: 10px 10px 5px #888888
九、媒体查询
媒体查询界说两套css，当浏览器的尺度改变时会采用不同的特点。