CSS动画.ZC资料收集

1、CSS3 动画.html（http://www.w3school.com.cn/css3/css3_animation.asp）

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

CSS3 动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0，意味着没有动画效果。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。infinite（规定动画应该无限次播放）	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"（动画应该正常播放）。alternate（动画应该轮流反向播放）	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"（规定动画正在播放）。paused（规定动画已暂停）	3
animation-fill-mode	规定对象动画时间之外的状态。	3

　　　　（1）、

语法

animation-timing-function: value;

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

值	描述	测试
linear	动画从头到尾的速度是相同的。	测试
ease	默认。动画以低速开始，然后加快，在结束前变慢。	测试
ease-in	动画以低速开始。	测试
ease-out	动画以低速结束。	测试
ease-in-out	动画以低速开始和结束。	测试
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

　　　　（2）、

语法

animation-fill-mode : none | forwards | backwards | both;

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

 

　　1.1、CSS3 animation 属性.html（http://www.w3school.com.cn/cssref/pr_animation.asp）

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

默认值：	none 0 ease 0 1 normal
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.animation="mymove 5s infinite"

语法

animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

 

　　1.2、CSS3 动画.html（http://www.w3school.com.cn/css3/css3_animation.asp）

2、CSS3 animation-timing-function 属性.html（http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp）

　　2.1、使用CSS渐变 - Web开发者指南 _ MDN.html（https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients）

　　　　CSS 渐变 是在 CSS3 Image Module 中新增加的 <image> 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布局。

　　　　浏览器支持两种类型的渐变：线性渐变 (linear)，通过 linear-gradient 函数定义，以及 径向渐变 (radial)，通过 radial-gradient 函数定义.

 

3、CSS3 @keyframes 规则.html（http://www.w3school.com.cn/cssref/pr_keyframes.asp）

语法

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

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。 合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

 

4、

5、