本帖最后由 gz_xudada 于 2017-12-22 16:08 编辑
1. 什么是 CSS3 中的动画？动画是使元素从一种样式逐渐变化为另一种样式的效果。 2. css3动画属性2.1. @keyframes 规定动画 2.1.1. 语法2.1.2. 浏览器支持2.1.3. 用法u 通过 @keyframes 规则，您能够创建动画。 u 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。 u 在动画过程中，您能够多次改变这套 CSS 样式。 u 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 u 0% 是动画的开始时间，100% 动画的结束时间。 u 为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。 2.1.4. 将@keyframes绑定到选择器在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器： 规定动画的名称,规定动画的时长 2.1.5. 实例
以下代码动画只执行一次,实现的是5秒div从红色变黄色,接着变蓝色,然后变绿色,最后变回红色 [CSS] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
75% {background: green;}
100% {background: red;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
75% {background: green;}
100% {background: red;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
75% {background: green;}
100% {background: red;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
75% {background: green;}
100% {background: red;}
}
/*把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：*/
div{
width: 100px;
height: 100px;
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果:
2.2. animation-name 用法: 规定 @keyframes 动画的名称 语法: animation-name: keyframename | none; 取值: keyframename 规定需要绑定到选择器的 keyframe 的名称 none 规定无动画效果（可用于覆盖来自级联的动画） 实例: 2.2.1. animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0 取值:数值,单位秒或毫秒 实例:
2.2.2. animation-timing-function 规定动画的速度曲线。默认是 "ease" 取值: 实例:
2.2.3. animation-delay 定义动画开始前等待的时间，以秒或毫秒计。默认值是 0 取值:数值,允许正负值,如-2s 使动画马上开始，但跳过 2 秒进入动画 实例: 效果:跳过了红色,黄色效果,直接从蓝色开始动画
2.2.4. animation-iteration-count 规定动画被播放的次数。默认是 1 取值: n 定义动画播放次数的数值 infinite 规定动画应该无限次播放 实例: 效果: 2.2.5. animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal" 取值: normal 默认值。动画应该正常播放。 alternate 动画轮流反向播放。 实例: 2.2.6. animation-play-state 规定动画是否正在运行或暂停。默认是 "running" 取值: paused 规定动画暂停 running 规定动画播放 实例: 效果: 2.2.7. animation-fill-mode 规定对象动画时间之外的状态 取值: 实例: 效果: 2.2.8. animation 所有动画属性的简写属性，除了 animation-play-state 属性 语法: animation: name duration timing-function delay iteration-count direction fill-mode; 实例:
2.2.9. 综合小案例代码: 效果:
| 
收藏
淘帖
踩
