background5db79b134e9f6b82c0b36e0489ee08ed-color: rgb(249, 249, 249);>css3 动画
通过 css3，我们能够创建动画，这可以在许多网页中取代动画图片、flash 动画以及 javascript。
css3 @keyframes 规则
如需在 css3 中创建动画，您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 css 样式，就能创建由当前样式逐渐改为新样式的动画效果。
浏览器支持
internet explorer 10、firefox 以及 opera 支持 @keyframes 规则和 animation 属性。
chrome 和 safari 需要前缀 -webkit-。
注释：internet explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
实例
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* firefox */{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* safari 和 chrome */{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* opera */{
from {background: red;}
to {background: yellow;}
}
css3 动画
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 css3 动画属性，即可将动画绑定到选择器：
规定动画的名称
规定动画的时长
实例
把 "myfirst" 动画捆绑到 p 元素，时长：5 秒：
p
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;/* firefox */-webkit-animation: myfirst 5s;/* safari 和 chrome */-o-animation: myfirst 5s;/* opera */}
注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。
什么是 css3 中的动画？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
实例
当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst /* firefox */{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* safari 和 chrome */{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst /* opera */{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
实例
改变背景色和位置：
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* firefox */{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* safari 和 chrome */{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* opera */{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
css3 动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：
下面的两个例子设置了所有动画属性：
实例
运行名为 myfirst 的动画，其中设置了所有动画属性：
p
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;/* firefox: */-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;/* safari 和 chrome: */-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;/* opera: */-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
实例
与上面的动画相同，但是使用了简写的动画 animation 属性：
p
{
animation: myfirst 5s linear 2s infinite alternate;
/* firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* safari 和 chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}
【相关推荐】
1. css3免费视频教程
2. 详细分析关于css3中新增的特性
3. 详解关于css3的新特性
4. 推荐十个css3动画实例
5. 分享一个css3的动画库
以上就是css3教学之动画制作学习的详细内容。