css入门 - 24 animation帧动画 - 《001.HTML5 CSS3》

1 关键帧 —
关键帧的时间单位
格式

1 关键帧 —

类似于flash定义动画在每个阶段的样式，即帧动画

关键帧的时间单位

数字: 0%、25%、100%等(设置某个时间段内的任意时间点的样式)
字符:form(0%)、to(100%);
格式
```
@keyframes 动画名称
{
  动画状态
}
```

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
  width:100px;
  height:100px;
  background:red;
  animation:myfirst 5s;
  -moz-animation:myfirst 5s; /* Firefox */
  -webkit-animation:myfirst 5s; /* Safari and Chrome */
  -o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
    from {background:red;}
  to {background:yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
    from {background:red;}
    to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from {background:red;}
    to {background:yellow;}
}
@-o-keyframes myfirst /* Opera */
{
    from {background:red;}
    to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>

格式

@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;}
}