CSS3动画--@keyframes

定义：
语法和参数：
code：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@KeyFrames</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; }
div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation: circle_inner linear 10s infinite;
            animation: circle_inner linear 10s infinite;
}
div > .middle { background-image: url(images/circle_middle.png);
    -webkit-animation: circle_middle linear 10s infinite;
            animation: circle_middle linear 10s infinite;
}
div > .outer { background-image: url(images/circle_outer.png);
    -webkit-animation: circle_outer linear 10s infinite;
            animation: circle_outer linear 10s infinite;
}
div > .imooc { background-image: url(images/imooc.png); }
@-webkit-keyframes circle_inner {
    form   { transform: rotateX(0deg);   }
    25%    { transform: rotateX(45deg);  }
    75%    { transform: rotateX(315deg); }
    to     { transform: rotateX(360deg); }
}
@keyframes circle_inner {
    form   { transform: rotateX(0deg);   }
    25%    { transform: rotateX(45deg);  }
    75%    { transform: rotateX(315deg); }
    to     { transform: rotateX(360deg); }
}
@-webkit-keyframes circle_middle {
    form   { transform: rotateY(0deg);   }
    25%    { transform: rotateY(45deg);  }
    75%    { transform: rotateY(315deg); }
    to     { transform: rotateY(360deg); }
}
@keyframes circle_middle {
    form   { transform: rotateY(0deg);   }
    25%    { transform: rotateY(45deg);  }
    75%    { transform: rotateY(315deg); }
    to     { transform: rotateY(360deg); }
}
@-webkit-keyframes circle_outer {
    form   { transform: rotateZ(0deg);   }
    25%    { transform: rotateZ(45deg);  }
    75%    { transform: rotateZ(315deg); }
    to     { transform: rotateZ(360deg); }
}
@keyframes circle_outer {
    form   { transform: rotateZ(0deg);   }
    25%    { transform: rotateZ(45deg);  }
    75%    { transform: rotateZ(315deg); }
    to     { transform: rotateZ(360deg); }
}
</style>
</head>
<body>
<div>
    <div class="inner"></div>
    <div class="middle"></div>
    <div class="outer"></div>
    <div class="imooc"></div>
</div>
</body>
</html>
猜你喜欢
