今天我们来说说 Animation 。它可以说开辟了 CSS 的新纪元，让 CSS 脱离了“静止”这一约定俗成的前提。以 webkit 为例，见如下代码：
    清单 28. CSS3 的 Animation
    @-webkit-keyframes anim1 {
    0% {
    Opacity: 0;
    Font-size: 12px;
    }
    100% {
    Opacity: 1;
    Font-size: 24px;
    }
    }
    .anim1Div {
    -webkit-animation-name: anim1 ;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    }
    首先，定义动画的内容，如清单 28 所示，定义动画“anim1”，变化方式为由“透明”（opacity: 0）变到“不透明”（opacity: 1），同时，内部字体大小由“12px”变到“24px”。然后，再来定义 animation 的变化参数，其中，“duration”表示动画持续时间，“iteration-count”表示动画重复次数，direction 表示动画执行完一次后方向的变化方式（如第一次从右向左，第二次则从左向右），最后，“timing-function”表示变化的模式。
    其实，CSS3 动画几乎支持所有的 style 变化，可以定义各种各样的动画效果以满足我们用户体验的需要。