CSS3简单动画

Posted on   |   In ,   |   visitors 

刚开始学习H5 方面的知识，看了CSS3 的基础属性，自己动手写了个小DEMO

主要是对transform 属性的使用，元素位移、旋转、缩放的操作，以及改变transform操作原点

DEMO运行效果：点击查看

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5 & CSS3 Rush</title>
    <style>
        .content {
            min-width: 1000px;
            width: 100%;
            height: 100%;
        }
        .content-head {
            display: inline-block;
            width: 520px;
            font: italic 900 78px/1 myfont;
            text-align: center;
            -webkit-text-shadow: -10px 10px 10px #666;
            -moz-text-shadow: -10px 10px 10px #666;
            -ms-text-shadow: -10px 10px 10px #666;
            -o-text-shadow: -10px 10px 10px #666;
            text-shadow: -10px 10px 10px #666;
            opacity: 1;
            -webkit-transform-origin: 10px 41px;
            -moz-transform-origin: 10px 41px;
            -ms-transform-origin: 10px 41px;
            -o-transform-origin: 10px 41px;
            transform-origin: 10px 41px;
            -webkit-animation: animation1 4s ease-in-out forwards,animation2 5s ease-in-out 4s forwards,animation3 3s ease-in 9s forwards,animation4 4s ease-in 12s forwards;
            -moz-animation: animation1 4s ease-in-out forwards,animation2 5s ease-in-out 4s forwards,animation3 3s ease-in 9s forwards,animation4 4s ease-in 12s forwards;
            -o-animation: animation1 4s ease-in-out forwards,animation2 5s ease-in-out 4s forwards,animation3 3s ease-in 9s forwards,animation4 4s ease-in 12s forwards;
            animation: animation1 4s ease-in-out forwards,animation2 5s ease-in-out 4s forwards,animation3 3s ease-in 9s forwards,animation4 4s ease-in 12s forwards;
        }
        @-webkit-keyframes animation1 {
            0% {  opacity: 0;-webkit-transform: translate(0);}
            50%{  opacity: 1;-webkit-transform: translate(210px);}
            70%{  opacity: 1;-webkit-transform: translate(230px);}
            100%{ opacity: 0;-webkit-transform: translate(420px);}
        }
        @-webkit-keyframes animation2 {
            0%  {opacity: 0;}
            20%  {opacity: 1;}
            40% {opacity: 0; }
            60% {opacity: 1;}
            80% {opacity: 0; }
            100% {opacity: 1;}
        }
        @-webkit-keyframes animation3 {
            0% { -webkit-transform: translate(420px);}
            25% { -webkit-transform: translate(420px);}
            50% { -webkit-transform: translate(420px) rotate(16deg);}
            55% { -webkit-transform: translate(420px) rotate(11deg);}
            60% { -webkit-transform: translate(420px) rotate(16deg);}
            65% { -webkit-transform: translate(420px) rotate(12deg);}
            70% { -webkit-transform: translate(420px) rotate(16deg);}
            75% { -webkit-transform: translate(420px) rotate(13deg);}
            80% { -webkit-transform: translate(420px) rotate(16deg);}
            85% { -webkit-transform: translate(420px) rotate(14deg);}
            90% { -webkit-transform: translate(420px) rotate(16deg);}
            95% { -webkit-transform: translate(420px) rotate(15deg);}
            100% {-webkit-transform: translate(420px) rotate(16deg);}
        }
        @-webkit-keyframes animation4 {
            0% { -webkit-transform: translate(420px) rotate(16deg); }
            10% { -webkit-transform-origin:510px 41px;-webkit-transform: translate(401px,137px) rotate(16deg); }
            25% { -webkit-transform: translate(401px,400px) rotate(16deg); }
            50% { -webkit-transform: translate(401px,400px) rotate(0deg); }
            55% { -webkit-transform: translate(401px,400px) rotate(8deg); }
            60% { -webkit-transform: translate(401px,400px) rotate(0deg); }
            65% { -webkit-transform: translate(401px,400px) rotate(5deg); }
            70% { -webkit-transform: translate(401px,400px) rotate(0deg); }
            75% { -webkit-transform: translate(401px,400px) rotate(3deg); }
            80% { -webkit-transform: translate(401px,400px) rotate(0deg); }
            85% { -webkit-transform: translate(401px,400px) rotate(2deg); }
            90% { -webkit-transform: translate(401px,400px) rotate(0deg); }
            95% { -webkit-transform: translate(401px,400px) rotate(1deg); }
            100% { -webkit-transform: translate(401px,400px) rotate(0deg); }
        }
        @-moz-keyframes animation1 {
            0% {  opacity: 0;-moz-transform: translate(0);}
            50%{  opacity: 1;-moz-transform: translate(210px);}
            70%{  opacity: 1;-moz-transform: translate(230px);}
            100%{ opacity: 0;-moz-transform: translate(420px);}
        }
        @-moz-keyframes animation2 {
            0%  {opacity: 0;}
            20%  {opacity: 1;}
            40% {opacity: 0; }
            60% {opacity: 1;}
            80% {opacity: 0; }
            100% {opacity: 1;}
        }
        @-moz-keyframes animation3 {
            0% { -moz-transform: translate(420px);}
            25% { -moz-transform: translate(420px);}
            50% { -moz-transform: translate(420px) rotate(16deg);}
            55% { -moz-transform: translate(420px) rotate(11deg);}
            60% { -moz-transform: translate(420px) rotate(16deg);}
            65% { -moz-transform: translate(420px) rotate(12deg);}
            70% { -moz-transform: translate(420px) rotate(16deg);}
            75% { -moz-transform: translate(420px) rotate(13deg);}
            80% { -moz-transform: translate(420px) rotate(16deg);}
            85% { -moz-transform: translate(420px) rotate(14deg);}
            90% { -moz-transform: translate(420px) rotate(16deg);}
            95% { -moz-transform: translate(420px) rotate(15deg);}
            100% {-moz-transform: translate(420px) rotate(16deg);}
        }
        @-moz-keyframes animation4 {
            0% { -moz-transform: translate(420px) rotate(16deg); }
            10% { -moz-transform-origin:510px 41px;-moz-transform: translate(401px,137px) rotate(16deg); }
            25% { -moz-transform: translate(401px,400px) rotate(16deg); }
            50% { -moz-transform: translate(401px,400px) rotate(0deg); }
            55% { -moz-transform: translate(401px,400px) rotate(8deg); }
            60% { -moz-transform: translate(401px,400px) rotate(0deg); }
            65% { -moz-transform: translate(401px,400px) rotate(5deg); }
            70% { -moz-transform: translate(401px,400px) rotate(0deg); }
            75% { -moz-transform: translate(401px,400px) rotate(3deg); }
            80% { -moz-transform: translate(401px,400px) rotate(0deg); }
            85% { -moz-transform: translate(401px,400px) rotate(2deg); }
            90% { -moz-transform: translate(401px,400px) rotate(0deg); }
            95% { -moz-transform: translate(401px,400px) rotate(1deg); }
            100% { -moz-transform: translate(401px,400px) rotate(0deg); }
        }
        @-ms-keyframes animation1 {
            0% {  opacity: 0;-ms-transform: translate(0);}
            50%{  opacity: 1;-ms-transform: translate(210px);}
            70%{  opacity: 1;-ms-transform: translate(230px);}
            100%{ opacity: 0;-ms-transform: translate(420px);}
        }
        @-ms-keyframes animation2 {
            0%  {opacity: 0;}
            20%  {opacity: 1;}
            40% {opacity: 0; }
            60% {opacity: 1;}
            80% {opacity: 0; }
            100% {opacity: 1;}
        }
        @-ms-keyframes animation3 {
            0% { -ms-transform: translate(420px);}
            25% { -ms-transform: translate(420px);}
            50% { -ms-transform: translate(420px) rotate(16deg);}
            55% { -ms-transform: translate(420px) rotate(11deg);}
            60% { -ms-transform: translate(420px) rotate(16deg);}
            65% { -ms-transform: translate(420px) rotate(12deg);}
            70% { -ms-transform: translate(420px) rotate(16deg);}
            75% { -ms-transform: translate(420px) rotate(13deg);}
            80% { -ms-transform: translate(420px) rotate(16deg);}
            85% { -ms-transform: translate(420px) rotate(14deg);}
            90% { -ms-transform: translate(420px) rotate(16deg);}
            95% { -ms-transform: translate(420px) rotate(15deg);}
            100% {-ms-transform: translate(420px) rotate(16deg);}
        }
        @-ms-keyframes animation4 {
            0% { -ms-transform: translate(420px) rotate(16deg); }
            10% { -ms-transform-origin:510px 41px;-ms-transform: translate(401px,137px) rotate(16deg); }
            25% { -ms-transform: translate(401px,400px) rotate(16deg); }
            50% { -ms-transform: translate(401px,400px) rotate(0deg); }
            55% { -ms-transform: translate(401px,400px) rotate(8deg); }
            60% { -ms-transform: translate(401px,400px) rotate(0deg); }
            65% { -ms-transform: translate(401px,400px) rotate(5deg); }
            70% { -ms-transform: translate(401px,400px) rotate(0deg); }
            75% { -ms-transform: translate(401px,400px) rotate(3deg); }
            80% { -ms-transform: translate(401px,400px) rotate(0deg); }
            85% { -ms-transform: translate(401px,400px) rotate(2deg); }
            90% { -ms-transform: translate(401px,400px) rotate(0deg); }
            95% { -ms-transform: translate(401px,400px) rotate(1deg); }
            100% { -ms-transform: translate(401px,400px) rotate(0deg); }
        }
        @-o-keyframes animation1 {
            0% {  opacity: 0;-o-transform: translate(0);}
            50%{  opacity: 1;-o-transform: translate(210px);}
            70%{  opacity: 1;-o-transform: translate(230px);}
            100%{ opacity: 0;-o-transform: translate(420px);}
        }
        @-o-keyframes animation2 {
            0%  {opacity: 0;}
            20%  {opacity: 1;}
            40% {opacity: 0; }
            60% {opacity: 1;}
            80% {opacity: 0; }
            100% {opacity: 1;}
        }
        @-o-keyframes animation3 {
            0% { -o-transform: translate(420px);}
            25% { -o-transform: translate(420px);}
            50% { -o-transform: translate(420px) rotate(16deg);}
            55% { -o-transform: translate(420px) rotate(11deg);}
            60% { -o-transform: translate(420px) rotate(16deg);}
            65% { -o-transform: translate(420px) rotate(12deg);}
            70% { -o-transform: translate(420px) rotate(16deg);}
            75% { -o-transform: translate(420px) rotate(13deg);}
            80% { -o-transform: translate(420px) rotate(16deg);}
            85% { -o-transform: translate(420px) rotate(14deg);}
            90% { -o-transform: translate(420px) rotate(16deg);}
            95% { -o-transform: translate(420px) rotate(15deg);}
            100% {-o-transform: translate(420px) rotate(16deg);}
        }
        @-o-keyframes animation4 {
            0% { -o-transform: translate(420px) rotate(16deg); }
            10% { -o-transform-origin:510px 41px;-o-transform: translate(401px,137px) rotate(16deg); }
            25% { -o-transform: translate(401px,400px) rotate(16deg); }
            50% { -o-transform: translate(401px,400px) rotate(0deg); }
            55% { -o-transform: translate(401px,400px) rotate(8deg); }
            60% { -o-transform: translate(401px,400px) rotate(0deg); }
            65% { -o-transform: translate(401px,400px) rotate(5deg); }
            70% { -o-transform: translate(401px,400px) rotate(0deg); }
            75% { -o-transform: translate(401px,400px) rotate(3deg); }
            80% { -o-transform: translate(401px,400px) rotate(0deg); }
            85% { -o-transform: translate(401px,400px) rotate(2deg); }
            90% { -o-transform: translate(401px,400px) rotate(0deg); }
            95% { -o-transform: translate(401px,400px) rotate(1deg); }
            100% { -o-transform: translate(401px,400px) rotate(0deg); }
        }
        @keyframes animation1 {
            0% {  opacity: 0;transform: translate(0);}
            50%{  opacity: 1;transform: translate(210px);}
            70%{  opacity: 1;transform: translate(230px);}
            100%{ opacity: 0;transform: translate(420px);}
        }
        @keyframes animation2 {
            0%  {opacity: 0;}
            20%  {opacity: 1;}
            40% {opacity: 0; }
            60% {opacity: 1;}
            80% {opacity: 0; }
            100% {opacity: 1;}
        }
        @keyframes animation3 {
            0% { transform: translate(420px);}
            25% { transform: translate(420px);}
            50% { transform: translate(420px) rotate(16deg);}
            55% { transform: translate(420px) rotate(11deg);}
            60% { transform: translate(420px) rotate(16deg);}
            65% { transform: translate(420px) rotate(12deg);}
            70% { transform: translate(420px) rotate(16deg);}
            75% { transform: translate(420px) rotate(13deg);}
            80% { transform: translate(420px) rotate(16deg);}
            85% { transform: translate(420px) rotate(14deg);}
            90% { transform: translate(420px) rotate(16deg);}
            95% { transform: translate(420px) rotate(15deg);}
            100% {transform: translate(420px) rotate(16deg);}
        }
        @keyframes animation4 {
            0% { transform: translate(420px) rotate(16deg); }
            10% { transform-origin:510px 41px;transform: translate(401px,137px) rotate(16deg); }
            25% { transform: translate(401px,400px) rotate(16deg); }
            50% { transform: translate(401px,400px) rotate(0deg); }
            55% { transform: translate(401px,400px) rotate(8deg); }
            60% { transform: translate(401px,400px) rotate(0deg); }
            65% { transform: translate(401px,400px) rotate(5deg); }
            70% { transform: translate(401px,400px) rotate(0deg); }
            75% { transform: translate(401px,400px) rotate(3deg); }
            80% { transform: translate(401px,400px) rotate(0deg); }
            85% { transform: translate(401px,400px) rotate(2deg); }
            90% { transform: translate(401px,400px) rotate(0deg); }
            95% { transform: translate(401px,400px) rotate(1deg); }
            100% { transform: translate(401px,400px) rotate(0deg); }
        }
        .demo-list {
            margin-left: 400px;
            list-style-type: none;
        }
        .demo-items {
            opacity: 0;
            height: 50px;
            width: 390px;
            text-align: center;
            font: italic 900 30px/50px myfont;
            -webkit-animation: animation5 3s linear 16s forwards;
            -o-animation: animation5 3s linear 16s forwards;
            animation: animation5 3s linear 16s forwards;
        }
        .demo-items a {
            color: inherit;
            text-decoration: none;
            text-shadow: -3px 3px 5px #666;
        }
        @keyframes animation5 {
            0%{opacity:0;transform: scale(1.3);}
            50%{opacity: 0.5;transform: scale(1.1);}
            100%{opacity: 1;transform: scale(1);}
        }
    </style>
</head>
<body>
<div class="content">
    <h1 class="content-head">H5 & CSS3 Rush！</h1>
    <ul class="demo-list">
        <li class="demo-items"><a href="#">Demo NO.1</a></li>
        <li class="demo-items"><a href="#">Demo NO.2</a></li>
        <li class="demo-items"><a href="#">Demo NO.0</a></li>
        <li class="demo-items"><a href="#">Demo NO.0</a></li>
    </ul>
</div>
</body>
</html>

Show comments from Gitment