CSS3 动画
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
CSS3.关键帧(@keyframes) 的规则
1.@keyframes 规则是创建动画。
2.@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
@-webkit-keyframes myfirst{
from {background: red;}
to {background: yellow;}
}
myfirst ：动画名
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s; // 执行的动画名 经过的时间
-webkit-animation:myfirst 5s; /* Safari and Chrome */ // 执行的动画名 经过的时间
}
@-webkit-keyframes myfirst{
from {background: red;}
to {background: yellow;}
}
</style>
<body>
<div></div>
---------------------->
动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
用百分比来规定变化发生的时间，用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
.动画属性
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
1.动画方向（animation-direction） animation-direction属性表示CSS动画是否反向播放。
animation-direction: normal 正序播放
animation-direction: reverse 倒序播放
animation-direction: alternate 交替播放
animation-direction: alternate-reverse 反向交替播放
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal
2.时间函数（animation-timing-function）
animation-timing-function属性定义了动画的播放速度曲线。
参数为:
ease、
ease-in、
ease-out、
ease-in-out、
linear、
cubic-bezier(number, number, number, number)
3.动画延迟（animation-delay）
animation-delay属性定义动画是从何时开始播放，即动画应用在元素上的到动画开始的这段时间的长度。
默认值0s，表示动画在该元素上后立即开始执行。
该值以秒(s)或者毫秒(ms)为单位。
4.动画迭代次数（animation-iteration-count）
animation-iteration-count该属性就是定义我们的动画播放的次数。次数可以是1次或者无限循环。
默认值只播放一次。
5.动画填充模式（animation-fill-mode）
animation-fill-mode是指给定动画播放前后应用元素的样式。
animation-fill-mode: none 动画执行前后不改变任何样式
animation-fill-mode: forwards 保持目标动画最后一帧的样式
animation-fill-mode: backwards 保持目标动画第一帧的样式
animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。
6.动画播放状态（animation-timing-function）
animation-play-state: 定义动画是否运行或者暂停。可以确定查询它来确定动画是否运行。
默认值为running
running 动画正常播放
paused 动画暂停播放
811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
