CSS3 动画：动态的 logo

该文章距离发布日期已经过了 3294 天 ，请注意信息甄别。

之前在一个国外网站看到网站 logo 是动态的，当时由于有其他事情做就没细想，现在回头想想应该是 CSS3，不然就是用 javascript 去实现。CSS3 提供了一个动画的属性，能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 @keyframes 规则
如需在 CSS3 中创建动画，需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

以下是 CSS 代码，做了两个动画：


        .center {
            position: fixed;
            width: 100%;
            height: 100%;
        }
        .block {
            width: 50px;
            height: 50px;
            border-radius: 5px;
            background-color: #0092dd;
            display: inline-block;
            position: relative;
        }
        .clear {
            display: block;
            height: 5px;
        }
        .animate_div {
            vertical-align: middle;
            text-align: center;
        }
        #animate1 {
            animation:animate_div1 5s infinite;
            -moz-animation:animate_div1 5s infinite; /* Firefox */
            -webkit-animation:animate_div1 5s infinite; /* Safari and Chrome */
            -o-animation:animate_div1 5s infinite; /* Opera */
        }
        #animate2 {
            animation:animate_div2 5s infinite;
            -moz-animation:animate_div2 5s infinite; /* Firefox */
            -webkit-animation:animate_div2 5s infinite; /* Safari and Chrome */
            -o-animation:animate_div2 5s infinite; /* Opera */
        }
        @keyframes animate_div1
        {
            0%      {transform: rotate(0deg);left:0px;}
            50%     {transform: rotate(360deg);left:100px;background-color:#1ec7e6;}
            100%    {transform: rotate(-360deg);left:0px;}
        }
        /* Firefox */
        @-webkit-keyframes animate_div1
        {
            0%		{-webkit-transform: rotate(0deg);left:0px;}
            50%		{-webkit-transform: rotate(360deg);left:100px;background-color:#1ec7e6;}
            100%	{-webkit-transform: rotate(-360deg);left:0px;}
        }
        /* Safari and Chrome */
        @-moz-keyframes animate_div1
        {
            0%      {-moz-transform: rotate(0deg);left:0px;}
            50%     {-moz-transform: rotate(360deg);left:100px;background-color:#1ec7e6;}
            100%    {-moz-transform: rotate(-360deg);left:0px;}
        }
        /* Opera */
        @-o-keyframes animate_div1
        {
            0%      {-o-transform: rotate(0deg);left:0px;}
            50%     {-o-transform: rotate(360deg);left:100px;background-color:#1ec7e6;}
            100%    {-o-transform: rotate(-360deg);left:0px;}
        }

        @keyframes animate_div2
        {
            0%      {transform: rotateY(0deg);left:0px;}
            50%     {transform: rotateY(360deg);left:0;background-color:#1ec7e6;}
            100%    {transform: rotateY(-360deg);left:0px;}
        }
        /* Firefox */
        @-webkit-keyframes animate_div2
        {
            0%      {-webkit-transform: rotateY(0deg);left:0px;}
            50%     {-webkit-transform: rotateY(360deg);left:0;background-color:#1ec7e6;}
            100%    {-webkit-transform: rotateY(-360deg);left:0px;}
        }Y
        /* Safari and Chrome */
        @-moz-keyframes animate_div2
        {
            0%      {-moz-transform: rotateY(0deg);left:0px;}
            50%     {-moz-transform: rotateY(360deg);left:0;background-color:#1ec7e6;}
            100%    {-moz-transform: rotateY(-360deg);left:0px;}
        }
        /* Opera */
        @-o-keyframes animate_div2
        {
            0%      {-o-transform: rotateY(0deg);left:0px;}
            50%     {-o-transform: rotateY(360deg);left:0;background-color:#1ec7e6;}
            100%    {-o-transform: rotateY(-360deg);left:0px;}
        }

详细查看例子（右键查看源文件）: DEMO