CSS3提供了强大的动画功能能，利用@keyframes可以很方便的制作关键帧动画；

　　简单来说，@keyframes就是通过from和to或者百分比值来在一段时间上打下关键帧（关键时间点），然后针对这些关键帧设定此时要实现的样式，然后计算机自动计算并完成其他非关键帧的插补；

　　动画的整体实现是通过animation来实现的：

　　animation:

　　　　animation-name　　/　　animation-duration　　/　　animation-timiing-function　　/　　animation-delay　　/　　animation-iteration-count　　/　　animation-direction　　/　　animation-play-state　　/　　animation-fill-mode;

 

　　　　animation-name:　　//动画名称；

　　　　animation-duration:　　//动画时长；

　　　　animation-timing-function:　　//默认ease，动画节奏控制；

　　　　animation-delay:　　//动画开始延时；

　　　　animation-iteration-count:　　//重复次数，值为数字或者infinite（无限次；

　　　　animation-direction:　　//是否正序，逆序交替播放；normal说明不交替，alternate则交替播放；

　　　　animation-play-state:　　//running或者paused；控制动画播放与暂停；

　　　　animation-fill-mode:　　//设置延时动画开始之前和动画结束之后的元素显示方式；

　　　　　　none:　　//默认方式；

　　　　　　forwards　　//动画结束后保持末尾关键帧；

　　　　　　backwards　　//延时动画开始前保持初始关键帧状态；

　　　　　　both:　　//同时forwards和backwards;

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style type="text/css">
        @keyframes animation01{
            0%        {background:red;width:200px;height:200px;left: 400px;transform: rotate(0deg);}
            35%        {background:yellow;width:150px;height:150px;left: 300px;transform: rotate(35deg);}
            70%        {background: green;width:200px;height: 200px;left: 400px;transform: rotate(70deg);}
            100%    {background:blue;width: 400px;height: 400px;left: 600px; transform: rotate(100deg);}
        }
        @keyframes animation02{
            100%        {background:red;width:200px;height:200px;left: 400px;transform: rotate(0deg);}
            70%        {background:yellow;width:150px;height:150px;left: 300px;transform: rotate(35deg);}
            35%        {background: green;width:200px;height: 200px;left: 400px;transform: rotate(70deg);}
            0%    {background:blue;width: 400px;height: 400px;left: 600px; transform: rotate(100deg);}
        }
        .div1{
            animation: animation01 1s ease 2s infinite alternate both;
            position: relative;
            top: 100px;
        }
        .div2{
            animation: animation02 1s ease 2s infinite alternate both;
            position: relative;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>