CSS3动画 -- 笔记 - 图2review0514 animation

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>animation</title>
  6.     <style type="text/css">
  7.         body{
  8.             background-color: #abcdef;
  9.         }
  11.         section{
  12.             position: relative;
  13.             width: 760px;
  14.             height: 760px;
  15.             margin: auto;
  16.             transform-style: preserve-3d;
  17.         }
  19.         div{
  20.             position: absolute;
  21.             top: 0;
  22.             right: 0;
  23.             bottom: 0;
  24.             left: 0;
  25.             width: 100%;
  26.             height: 100%;
  27.             margin: auto;
  28.             background-repeat: no-repeat;
  29.             background-position: center;
  30.         }
  32.         .inner{
  33.             background-image: url(images/circle_inner.png);
  34.             animation-name: circle_inner;
  35.             animation-duration: 2s;
  36.             animation-delay: 1s;
  37.             animation-iteration-count: infinite;
  38.             animation-direction: alternate;
  39.             animation-fill-mode: both;
  40.             animation-play-state: running;
  41.         }
  42.         .middle{
  43.             background-image: url(images/circle_middle.png);
  44.             animation-name: circle_middle;
  45.             animation-duration: 2s;
  46.             animation-delay: 1s;
  47.             animation-iteration-count: infinite;
  48.             animation-direction: alternate;
  49.             animation-fill-mode: both;
  50.             animation-play-state: running;
  51.         }
  52.         .outer{
  53.             background-image: url(images/circle_outer.png);
  54.             animation-name: circle_outer;
  55.             animation-duration: 2s;
  56.             animation-delay: 1s;
  57.             animation-iteration-count: infinite;
  58.             animation-direction: alternate;
  59.             animation-fill-mode: both;
  60.             animation-play-state: running;
  61.         }
  62.         .dodoke{
  63.             background-image: url(images/dodoke.png);
  64.         }
  66.         @keyframes circle_inner{
  67.             from {
  68.                 transform: rotateX(0deg);
  69.             }
  70.             to {
  71.                 transform: rotateX(360deg);
  72.             }
  73.         }
  74.         @keyframes circle_middle{
  75.             from {
  76.                 transform: rotateY(0deg);
  77.             }
  78.             to {
  79.                 transform: rotateY(360deg);
  80.             }
  81.         }
  82.         @keyframes circle_outer{
  83.             from {
  84.                 transform: rotateZ(0deg);
  85.             }
  86.             to {
  87.                 transform: rotateZ(360deg);
  88.             }
  89.         }
  90.     </style>
  91. </head>
  92. <body>
  93.     <section>
  94.         <div class="inner"></div>
  95.         <div class="middle"></div>
  96.         <div class="outer"></div>
  97.         <div class="dodoke"></div>
  98.     </section>
  99. </body>
  100. </html>

review0514 animation2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation2</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            position: relative;
            animation: changecolor 5s .5s infinite alternate;
        }

        @keyframes changecolor{
            0%{
                background-color: red;
                left: 0px; 
                top: 0px;
            }
            25%{
                background-color: yellow;
                left: 200px; 
                top: 0px;
            }
            50%{
                background-color: blue;
                left: 200px; 
                top: 200px;
            }
            75%{
                background-color: green;
                left: 0px; 
                top: 200px;
            }
            100%{
                background-color: red;
                left: 0px; 
                top: 0px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>