CSS 动画基础：常用动画效果的设置 设页面中有<div class=”shape”></div>，若定义.shape 的样式规则为：
.shape
{
position: absolute;
left:125px;
top:75px;
width: 150px;
height: 150px;
border-radius:10% 50% 10% 50%;
border:2px solid #f00;
background-color: #ff0;
} 可在页面中显示如图 1 所示的图形。
图 1
动画基本图形 以这个图形作为参与动画的对象，为其定义关键帧 anim，并设置 animation 属性，使之产生动画效果。
例如，定义如下的关键帧 anim
@keyframes anim
{
0%,15% { transform: rotate(0); }
100%
{ transform: rotate(360deg);
}
} 可在页面中呈现如图 2 所示的动画，图形旋转起来了。
图 2
图形旋转效果 编写的 HTML 文件内容如下。
<!DOCTYPE html>
<html> <title>图形的动画效果</title> <head> <style>
.container
{
position: relative;
margin: 50px auto;
width: 400px;
height:300px;
background:#d8d8d8;
overflow:hidden;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.shape
{
position: absolute;
left:125px;
top:75px;
width: 150px;
height: 150px;
border-radius:10% 50% 10% 50%;
border:2px solid #f00;
background-color: #ff0;
animation:anim 5s linear infinite;
}
@keyframes anim
{
0%
{ transform: rotate(0); }
100%
{ transform: rotate(360deg);
}
} </style> </head> <body> <div class="container">
<div class="shape"></div> </div> </body> </html> 1．闪烁 闪烁动画效果的设置主要利用 opacity 属性为参与动画的对象设置一个透明度级别。其基本格式为：opacity: value;
其中，属性值 value 指定不透明度。从 0.0（完全透明）到 1.0（完全不透明）。
若修改关键帧 anim 如下：
@keyframes anim
{
0%,50%,100%
{opacity:1;}
25%,75%
{opacity:0;}
} 则在页面中呈现如图 3 所示的闪烁动画效果。
图 3
闪烁 2．淡入淡出 利用 opacity 属性还可以实现淡入淡出的动画效果。
若修改关键帧 anim 如下：
@keyframes anim
{
0%
{
opacity:1;
transform:translateY(0);
}
100%
{
opacity:0;
transform:translateY(-225px);
}
} 则在页面中呈现如图 4 所示的向上淡出动画效果。
图 4
向上淡出 若修改关键帧 anim 如下：
@keyframes anim
{
0%
{
opacity:0;
transform:translateX(-275px);
}
100%
{
opacity:1;
transform:translateX(0);
}
} 则在页面中呈现如图 5 所示的从左淡入动画效果。
图 5
从左淡入 仿照上面的例子，大家可以试试向下淡出、向左淡出、向右淡出、从上淡入、从下淡入、从右淡入等动画效果的设置。甚至可以设置从四个角向中心的淡入、从中心向四个角淡出的动画效果。
3．飞入 利用变换属性 transform:translate();让对象的位置进行变化，可以实现飞入动画效果。
若修改关键帧 anim 如下：
@keyframes anim
{
0%
{ transform:translate(-275px,-225px);
}
100%
{ transform:translate(0,0);
}
} 则在页面中呈现如图 6 所示的从左上角飞入动画效果。
图 6
从左上角飞入 4．缩放 缩放主要是利用变换属性 transform:scale(n)进行设置。
若修改关键帧 anim 如下：
@keyframes anim
{
0%,100%
{ transform:scale(1);}
50%
{ transform:scale(1.8);}
} 则在页面中呈现如图 7 所示的放大与缩小动画效果。
图 7
放大与缩小 5．翻转 利用属性 transform: rotateX(n);或 transform: rotateY(n);可以实现翻转动画效果。
若修改关键帧 anim 如下：
@keyframes anim
{
0%
{transform:perspective(400px) rotateY(0);}
100% {transform:perspective(400px) rotateY(360deg);}
} 则在页面中呈现如图 8 所示的水平（左右）翻转动画效果。
图 8
水平翻转 若修改关键帧 anim 如下：
@keyframes anim
{
0%
{transform:perspective(400px) rotateX(0);}
100% {transform:perspective(400px) rotateX(360deg);}
} 则在页面中呈现如图 9 所示的垂直（上下）翻转动画效果。
图 9
垂直翻转
若修改关键帧 anim 如下：
@keyframes anim
{
0%
{ transform:perspective(400px) rotateY(0);}
40% { transform:perspective(400px) rotateY(170deg) scale(1.5);}
50% { transform:perspective(400px) rotateY(190deg) scale(1.5);}
80% { transform:perspective(400px) rotateY(360deg) scale(1);}
100% {transform:perspective(400px) scale(1);}
} 则在页面中呈现如图 10 所示的缩放翻转动画效果。
图 10
缩放式翻转 6．摇摆 让对象在一个较小范围内进行旋转，可以实现摇摆的动画效果。
若修改关键帧 anim 如下：
@keyframes anim
{
20%
{ transform:rotate(15deg); }
40%
{ transform:rotate(-15deg); }
60%
{ transform:rotate(8deg);}
80%
{ transform:rotate(-8deg); }
100% { transform:rotate(0); }
} 则在页面中呈现如图 11 所示的摇摆动画效果。
图 11
摇摆 若在摇摆过程同时让对象左右适当平移，修改关键帧 anim 如下：
@keyframes anim
{
0%,100%
{ transform:translateX(0);}
15%
{ transform:translateX(-100px) rotate(-5deg);}
30%
{ transform:translateX(80px) rotate(5deg);}
45%
{ transform:translateX(-65px) rotate(-3deg);}
60%
{ transform:translateX(40px) rotate(3deg);}
75%
{ transform:translateX(-20px) rotate(-1deg);}
} 则在页面中呈现如图 12 所示的左右摇摆动画效果。
图 12
左右摇摆 若在摇摆过程同时让对象进行适当缩放，修改关键帧 anim 如下：
@keyframes anim
{
0%,100%
{
transform:scale(1)
rotate(0);}
10%,20%
{ transform:scale(0.9) rotate(-8deg);}
30%,50%,70%,90% { transform:scale(1.1) rotate(8deg);}
40%,60%,80%
{ transform:scale(1.1) rotate(-8deg);}
} 则在页面中呈现如图 13 所示的晃动动画效果，它也像在振铃。
图 13
晃动 7．往复运动 若修改关键帧 anim 如下：
@keyframes anim
{
0%,100%
{
transform:translateX(0); }
10%,30%,50%,70%,90%
{
transform:translateX(-15px); }
20%,40%,60%,80%
{
transform:translateX(15px); }
}
则在页面中呈现如图 14 所示的左右往复运动动画效果。
图 14
左右往复运动 若修改关键帧 anim 如下：
@keyframes anim
{
0%,20%,50%,80%,100% { transform:translateY(0);}
40% { transform:translateY(-50px); }
60% { transform:translateY(50px); }
} 则在页面中呈现如图 15 所示的上下弹跳动画效果。
图 15
上下弹跳 若修改关键帧 anim 如下：
@keyframes anim
{
0%,100% { transform:translate(-20px,-20px); }
25%
{ transform:translate(-20px,20px); }
50%
{ transform:translate(20px,20px); }
80%
{ transform:translate(20px,-20px); }
} 则在页面中呈现如图 16 所示的四周循环往复动画效果。
图 16
四周循环往复运动
8．旋入 若修改关键帧 anim 如下：
@keyframes anim
{
0%
{ transform-origin:left bottom;transform:rotate(-180deg); opacity:0; }
100%
{ transform-origin:left bottom;transform:rotate(0); opacity:1;}
} 则在页面中呈现如图 17 所示的从左下角旋入动画效果。
图 17
从左下角旋入