这篇博客介绍了CSS3的@keyframes规则，用于创建动画效果。文章讲解了@keyframes如何定义样式变化，以及浏览器的支持情况。还列举了CSS3的动画属性，并解释了动画是如何让元素从一种样式平滑过渡到另一种样式的。文中提供了两个实例来展示如何使用@keyframes创建动画。
CSS3 @keyframes 规则
要创建CSS3动画，你将不得不了解@keyframes规则。
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
CSS3的动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：
CSS3动画是什么？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
例子：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animati
最低0.47元/天 解锁文章
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
