Scribd Logo
Upload

Welcome to Scribd!

  • Code For Malevich Unsettled

    Uploaded by

    Isabel Brison
    13 views22 pages
    html and css for my Malevich Unsettled animation, formatted as text for reading purposes. A Sunday afternoon aesthetic experiment.

    Original Title

    Code for Malevich Unsettled

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    html and css for my Malevich Unsettled animation, formatted as text for reading purposes. A Sunday afternoon aesthetic experiment.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    13 views22 pages

    Code For Malevich Unsettled

    Uploaded by

    Isabel Brison
    html and css for my Malevich Unsettled animation, formatted as text for reading purposes. A Sunday afternoon aesthetic experiment.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 22

    <!

    DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>css malevich</title>
    <style>
    html, body, div, p, ul, h1, h2, aside {
    margin: 0;
    padding: 0; }
    a{
    text-decoration: none; }
    li {
    list-style-type: none; }
    body {
    background: #fdfddd; }
    #container {
    margin: 3% auto; }
    #container div {
    background: #0e1d0e;
    float: left;
    margin: 5px;
    -webkit-animation-duration: 6s;
    -moz-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    #rect1 {
    width: 50px;
    height: 45px;
    -webkit-transform: translate(270px, 150px) rotate(-32deg);
    transform: translate(270px, 150px) rotate(-32deg);
    -webkit-animation-name: one;
    -moz-animation-name: one;

    animation-name: one;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    animation-delay: 3s;
    outline: 1px solid transparent; }
    @-webkit-keyframes one {
    from {
    -webkit-transform: translate(270px, 150px) rotate(-32deg);
    transform: translate(270px, 150px) rotate(-32deg); }
    12,5% {
    -webkit-transform: translate(370px, 78px) rotate(-26deg);
    transform: translate(370px, 78px) rotate(-26deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    25% {
    -webkit-transform: translate(470px, 36px) rotate(-18deg);
    transform: translate(470px, 36px) rotate(-18deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    37,5% {
    -webkit-transform: translate(570px, 24px) rotate(-10deg);
    transform: translate(570px, 24px) rotate(-10deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    50% {
    -webkit-transform: translate(670px, 16px) rotate(-6deg);
    transform: translate(670px, 16px) rotate(-6deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    62,5% {
    -webkit-transform: translate(770px, 10px) rotate(0deg);
    transform: translate(770px, 10px) rotate(0deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }

    75% {
    -webkit-transform: translate(870px, 20px) rotate(6deg);
    transform: translate(870px, 20px) rotate(6deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    87,5% {
    -webkit-transform: translate(970px, 40px) rotate(12deg);
    transform: translate(970px, 40px) rotate(12deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    to {
    -webkit-transform: translate(1070px, 80px) rotate(20deg);
    transform: translate(1070px, 80px) rotate(20deg); } }
    @keyframes one {
    from {
    -webkit-transform: translate(270px, 150px) rotate(-32deg);
    transform: translate(270px, 150px) rotate(-32deg); }
    12,5% {
    -webkit-transform: translate(370px, 78px) rotate(-26deg);
    transform: translate(370px, 78px) rotate(-26deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    25% {
    -webkit-transform: translate(470px, 36px) rotate(-18deg);
    transform: translate(470px, 36px) rotate(-18deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    37,5% {
    -webkit-transform: translate(570px, 24px) rotate(-10deg);
    transform: translate(570px, 24px) rotate(-10deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    50% {

    -webkit-transform: translate(670px, 16px) rotate(-6deg);


    transform: translate(670px, 16px) rotate(-6deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    62,5% {
    -webkit-transform: translate(770px, 10px) rotate(0deg);
    transform: translate(770px, 10px) rotate(0deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    75% {
    -webkit-transform: translate(870px, 20px) rotate(6deg);
    transform: translate(870px, 20px) rotate(6deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    87,5% {
    -webkit-transform: translate(970px, 40px) rotate(12deg);
    transform: translate(970px, 40px) rotate(12deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    to {
    -webkit-transform: translate(1070px, 80px) rotate(20deg);
    transform: translate(1070px, 80px) rotate(20deg); } }
    #rect2 {
    width: 35px;
    height: 23px;
    -webkit-transform: translate(300px, 150px) rotate(-32deg);
    transform: translate(300px, 150px) rotate(-32deg);
    -webkit-animation-name: two;
    -moz-animation-name: two;
    animation-name: two;
    -webkit-animation-delay: 2800ms;
    -moz-animation-delay: 2800ms;
    animation-delay: 2800ms;
    outline: 1px solid transparent; }
    @-webkit-keyframes two {
    from {

    -webkit-transform: translate(300px, 150px) rotate(-32deg);


    transform: translate(300px, 150px) rotate(-32deg); }
    12,5% {
    -webkit-transform: translate(400px, 78px) rotate(-26deg);
    transform: translate(400px, 78px) rotate(-26deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    25% {
    -webkit-transform: translate(500px, 36px) rotate(-18deg);
    transform: translate(500px, 36px) rotate(-18deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    37,5% {
    -webkit-transform: translate(600px, 24px) rotate(-10deg);
    transform: translate(600px, 24px) rotate(-10deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    50% {
    -webkit-transform: translate(700px, 16px) rotate(-6deg);
    transform: translate(700px, 16px) rotate(-6deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    62,5% {
    -webkit-transform: translate(800px, 10px) rotate(0deg);
    transform: translate(800px, 10px) rotate(0deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    75% {
    -webkit-transform: translate(900px, 20px) rotate(6deg);
    transform: translate(900px, 20px) rotate(6deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }

    87,5% {
    -webkit-transform: translate(1000px, 40px) rotate(12deg);
    transform: translate(1000px, 40px) rotate(12deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    to {
    -webkit-transform: translate(1100px, 80px) rotate(20deg);
    transform: translate(1100px, 80px) rotate(20deg); } }
    @keyframes two {
    from {
    -webkit-transform: translate(300px, 150px) rotate(-32deg);
    transform: translate(300px, 150px) rotate(-32deg); }
    12,5% {
    -webkit-transform: translate(400px, 78px) rotate(-26deg);
    transform: translate(400px, 78px) rotate(-26deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    25% {
    -webkit-transform: translate(500px, 36px) rotate(-18deg);
    transform: translate(500px, 36px) rotate(-18deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    37,5% {
    -webkit-transform: translate(600px, 24px) rotate(-10deg);
    transform: translate(600px, 24px) rotate(-10deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    50% {
    -webkit-transform: translate(700px, 16px) rotate(-6deg);
    transform: translate(700px, 16px) rotate(-6deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    62,5% {
    -webkit-transform: translate(800px, 10px) rotate(0deg);

    transform: translate(800px, 10px) rotate(0deg);


    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    75% {
    -webkit-transform: translate(900px, 20px) rotate(6deg);
    transform: translate(900px, 20px) rotate(6deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    87,5% {
    -webkit-transform: translate(1000px, 40px) rotate(12deg);
    transform: translate(1000px, 40px) rotate(12deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    to {
    -webkit-transform: translate(1100px, 80px) rotate(20deg);
    transform: translate(1100px, 80px) rotate(20deg); } }
    #rect3 {
    width: 180px;
    height: 33px;
    clear: left;
    -webkit-transform: translate(120px, 240px) rotate(-36deg);
    transform: translate(120px, 240px) rotate(-36deg);
    -webkit-animation-name: three;
    -moz-animation-name: three;
    animation-name: three;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    animation-delay: 5s;
    outline: 1px solid transparent; }
    @-webkit-keyframes three {
    from {
    -webkit-transform: translate(120px, 240px) rotate(-36deg);
    transform: translate(120px, 240px) rotate(-36deg); }
    12,5% {
    -webkit-transform: translate(230px, 148px) rotate(-30deg);
    transform: translate(230px, 148px) rotate(-30deg);
    -webkit-animation-timing-function: linear;

    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    25% {
    -webkit-transform: translate(340px, 86px) rotate(-22deg);
    transform: translate(340px, 86px) rotate(-22deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    37,5% {
    -webkit-transform: translate(450px, 84px) rotate(-14deg);
    transform: translate(450px, 84px) rotate(-14deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    50% {
    -webkit-transform: translate(560px, 66px) rotate(-10deg);
    transform: translate(560px, 66px) rotate(-10deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    62,5% {
    -webkit-transform: translate(670px, 50px) rotate(-4deg);
    transform: translate(670px, 50px) rotate(-4deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    75% {
    -webkit-transform: translate(780px, 70px) rotate(4deg);
    transform: translate(780px, 70px) rotate(4deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    87,5% {
    -webkit-transform: translate(900px, 90px) rotate(10deg);
    transform: translate(900px, 90px) rotate(10deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }

    to {
    -webkit-transform: translate(1100px, 140px) rotate(18deg);
    transform: translate(1100px, 140px) rotate(18deg); } }
    @keyframes three {
    from {
    -webkit-transform: translate(120px, 240px) rotate(-36deg);
    transform: translate(120px, 240px) rotate(-36deg); }
    12,5% {
    -webkit-transform: translate(230px, 148px) rotate(-30deg);
    transform: translate(230px, 148px) rotate(-30deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    25% {
    -webkit-transform: translate(340px, 86px) rotate(-22deg);
    transform: translate(340px, 86px) rotate(-22deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    37,5% {
    -webkit-transform: translate(450px, 84px) rotate(-14deg);
    transform: translate(450px, 84px) rotate(-14deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    50% {
    -webkit-transform: translate(560px, 66px) rotate(-10deg);
    transform: translate(560px, 66px) rotate(-10deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    62,5% {
    -webkit-transform: translate(670px, 50px) rotate(-4deg);
    transform: translate(670px, 50px) rotate(-4deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    75% {
    -webkit-transform: translate(780px, 70px) rotate(4deg);

    transform: translate(780px, 70px) rotate(4deg);


    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    87,5% {
    -webkit-transform: translate(900px, 90px) rotate(10deg);
    transform: translate(900px, 90px) rotate(10deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    to {
    -webkit-transform: translate(1100px, 140px) rotate(18deg);
    transform: translate(1100px, 140px) rotate(18deg); } }
    #rect4 {
    width: 35px;
    height: 30px;
    -webkit-transform: translate(120px, 172px) rotate(-34deg);
    transform: translate(120px, 172px) rotate(-34deg);
    -webkit-animation-name: four;
    -moz-animation-name: four;
    animation-name: four;
    -webkit-animation-delay: 4200ms;
    -moz-animation-delay: 4200ms;
    animation-delay: 4200ms;
    outline: 1px solid transparent; }
    @-webkit-keyframes four {
    from {
    -webkit-transform: translate(120px, 172px) rotate(-34deg);
    transform: translate(120px, 172px) rotate(-34deg); }
    12,5% {
    -webkit-transform: translate(230px, 100px) rotate(-28deg);
    transform: translate(230px, 100px) rotate(-28deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    25% {
    -webkit-transform: translate(340px, 58px) rotate(-20deg);
    transform: translate(340px, 58px) rotate(-20deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;

    animation-timing-function: linear; }
    37,5% {
    -webkit-transform: translate(450px, 46px) rotate(-12deg);
    transform: translate(450px, 46px) rotate(-12deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    50% {
    -webkit-transform: translate(560px, 38px) rotate(-8deg);
    transform: translate(560px, 38px) rotate(-8deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    62,5% {
    -webkit-transform: translate(670px, 32px) rotate(-2deg);
    transform: translate(670px, 32px) rotate(-2deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    75% {
    -webkit-transform: translate(780px, 42px) rotate(4deg);
    transform: translate(780px, 42px) rotate(4deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    87,5% {
    -webkit-transform: translate(880px, 62px) rotate(10deg);
    transform: translate(880px, 62px) rotate(10deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    to {
    -webkit-transform: translate(980px, 102px) rotate(18deg);
    transform: translate(980px, 102px) rotate(18deg); } }
    @keyframes four {
    from {
    -webkit-transform: translate(120px, 172px) rotate(-34deg);
    transform: translate(120px, 172px) rotate(-34deg); }

    12,5% {
    -webkit-transform: translate(230px, 100px) rotate(-28deg);
    transform: translate(230px, 100px) rotate(-28deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    25% {
    -webkit-transform: translate(340px, 58px) rotate(-20deg);
    transform: translate(340px, 58px) rotate(-20deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    37,5% {
    -webkit-transform: translate(450px, 46px) rotate(-12deg);
    transform: translate(450px, 46px) rotate(-12deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    50% {
    -webkit-transform: translate(560px, 38px) rotate(-8deg);
    transform: translate(560px, 38px) rotate(-8deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    62,5% {
    -webkit-transform: translate(670px, 32px) rotate(-2deg);
    transform: translate(670px, 32px) rotate(-2deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    75% {
    -webkit-transform: translate(780px, 42px) rotate(4deg);
    transform: translate(780px, 42px) rotate(4deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    87,5% {
    -webkit-transform: translate(880px, 62px) rotate(10deg);
    transform: translate(880px, 62px) rotate(10deg);

    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    to {
    -webkit-transform: translate(980px, 102px) rotate(18deg);
    transform: translate(980px, 102px) rotate(18deg); } }
    #rect5 {
    width: 60px;
    height: 25px;
    -webkit-transform: translate(158px, 138px) rotate(-32deg);
    transform: translate(158px, 138px) rotate(-32deg);
    -webkit-animation-name: five;
    -moz-animation-name: five;
    animation-name: five;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    animation-delay: 2s;
    outline: 1px solid transparent; }
    @-webkit-keyframes five {
    from {
    -webkit-transform: translate(158px, 138px) rotate(-32deg);
    transform: translate(158px, 138px) rotate(-32deg); }
    12,5% {
    -webkit-transform: translate(268px, 66px) rotate(-26deg);
    transform: translate(268px, 66px) rotate(-26deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    25% {
    -webkit-transform: translate(368px, 24px) rotate(-18deg);
    transform: translate(368px, 24px) rotate(-18deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    37,5% {
    -webkit-transform: translate(468px, 12px) rotate(-10deg);
    transform: translate(468px, 12px) rotate(-10deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }

    50% {
    -webkit-transform: translate(568px, 4px) rotate(-6deg);
    transform: translate(568px, 4px) rotate(-6deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    62,5% {
    -webkit-transform: translate(668px, -2px) rotate(0deg);
    transform: translate(668px, -2px) rotate(0deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    75% {
    -webkit-transform: translate(768px, 8px) rotate(6deg);
    transform: translate(768px, 8px) rotate(6deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    87,5% {
    -webkit-transform: translate(868px, 28px) rotate(12deg);
    transform: translate(868px, 28px) rotate(12deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    to {
    -webkit-transform: translate(968px, 68px) rotate(20deg);
    transform: translate(968px, 68px) rotate(20deg); } }
    @keyframes five {
    from {
    -webkit-transform: translate(158px, 138px) rotate(-32deg);
    transform: translate(158px, 138px) rotate(-32deg); }
    12,5% {
    -webkit-transform: translate(268px, 66px) rotate(-26deg);
    transform: translate(268px, 66px) rotate(-26deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    25% {

    -webkit-transform: translate(368px, 24px) rotate(-18deg);


    transform: translate(368px, 24px) rotate(-18deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    37,5% {
    -webkit-transform: translate(468px, 12px) rotate(-10deg);
    transform: translate(468px, 12px) rotate(-10deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    50% {
    -webkit-transform: translate(568px, 4px) rotate(-6deg);
    transform: translate(568px, 4px) rotate(-6deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    62,5% {
    -webkit-transform: translate(668px, -2px) rotate(0deg);
    transform: translate(668px, -2px) rotate(0deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    75% {
    -webkit-transform: translate(768px, 8px) rotate(6deg);
    transform: translate(768px, 8px) rotate(6deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    87,5% {
    -webkit-transform: translate(868px, 28px) rotate(12deg);
    transform: translate(868px, 28px) rotate(12deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    to {
    -webkit-transform: translate(968px, 68px) rotate(20deg);
    transform: translate(968px, 68px) rotate(20deg); } }
    #rect6 {

    width: 145px;
    height: 40px;
    -webkit-transform: translate(-78px, 236px) rotate(-31deg);
    transform: translate(-78px, 236px) rotate(-31deg);
    -webkit-animation-name: six;
    -moz-animation-name: six;
    animation-name: six;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    animation-delay: 5s;
    outline: 1px solid transparent; }
    @-webkit-keyframes six {
    from {
    -webkit-transform: translate(-78px, 236px) rotate(-31deg);
    transform: translate(-78px, 236px) rotate(-31deg); }
    12,5% {
    -webkit-transform: translate(22px, 164px) rotate(-25deg);
    transform: translate(22px, 164px) rotate(-25deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    25% {
    -webkit-transform: translate(122px, 122px) rotate(-17deg);
    transform: translate(122px, 122px) rotate(-17deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    37,5% {
    -webkit-transform: translate(222px, 110px) rotate(-9deg);
    transform: translate(222px, 110px) rotate(-9deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    50% {
    -webkit-transform: translate(322px, 107px) rotate(-5deg);
    transform: translate(322px, 107px) rotate(-5deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }

    62,5% {
    -webkit-transform: translate(422px, 1066px) rotate(1deg);
    transform: translate(422px, 106px) rotate(1deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    75% {
    -webkit-transform: translate(522px, 116px) rotate(7deg);
    transform: translate(522px, 116px) rotate(7deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    87,5% {
    -webkit-transform: translate(622px, 136px) rotate(13deg);
    transform: translate(622px, 136px) rotate(13deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    to {
    -webkit-transform: translate(722px, 166px) rotate(21deg);
    transform: translate(722px, 166px) rotate(21deg); } }
    @keyframes six {
    from {
    -webkit-transform: translate(-78px, 236px) rotate(-31deg);
    transform: translate(-78px, 236px) rotate(-31deg); }
    12,5% {
    -webkit-transform: translate(22px, 164px) rotate(-25deg);
    transform: translate(22px, 164px) rotate(-25deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    25% {
    -webkit-transform: translate(122px, 122px) rotate(-17deg);
    transform: translate(122px, 122px) rotate(-17deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    37,5% {
    -webkit-transform: translate(222px, 110px) rotate(-9deg);

    transform: translate(222px, 110px) rotate(-9deg);


    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    50% {
    -webkit-transform: translate(322px, 107px) rotate(-5deg);
    transform: translate(322px, 107px) rotate(-5deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    62,5% {
    -webkit-transform: translate(422px, 1066px) rotate(1deg);
    transform: translate(422px, 106px) rotate(1deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    75% {
    -webkit-transform: translate(522px, 116px) rotate(7deg);
    transform: translate(522px, 116px) rotate(7deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    87,5% {
    -webkit-transform: translate(622px, 136px) rotate(13deg);
    transform: translate(622px, 136px) rotate(13deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    to {
    -webkit-transform: translate(722px, 166px) rotate(21deg);
    transform: translate(722px, 166px) rotate(21deg); } }
    #rect7 {
    width: 80px;
    height: 75px;
    clear: left;
    -webkit-transform: translate(298px, 221px) rotate(-34deg);
    transform: translate(298px, 221px) rotate(-34deg);
    -webkit-animation-name: seven;
    -moz-animation-name: seven;
    animation-name: seven;

    -webkit-animation-delay: 8500ms;
    -moz-animation-delay: 8500ms;
    animation-delay: 8500ms;
    outline: 1px solid transparent; }
    @-webkit-keyframes seven {
    from {
    -webkit-transform: translate(298px, 221px) rotate(-34deg);
    transform: translate(298px, 221px) rotate(-34deg); }
    12,5% {
    -webkit-transform: translate(398px, 159px) rotate(-28deg);
    transform: translate(398px, 159px) rotate(-28deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    25% {
    -webkit-transform: translate(498px, 127px) rotate(-20deg);
    transform: translate(498px, 127px) rotate(-20deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    37,5% {
    -webkit-transform: translate(598px, 125px) rotate(-12deg);
    transform: translate(598px, 125px) rotate(-12deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    50% {
    -webkit-transform: translate(698px, 127px) rotate(-8deg);
    transform: translate(698px, 127px) rotate(-8deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    62,5% {
    -webkit-transform: translate(798px, 131px) rotate(-2deg);
    transform: translate(798px, 131px) rotate(-2deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }

    75% {
    -webkit-transform: translate(898px, 141px) rotate(4deg);
    transform: translate(898px, 141px) rotate(4deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    87,5% {
    -webkit-transform: translate(998px, 161px) rotate(10deg);
    transform: translate(998px, 161px) rotate(10deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    to {
    -webkit-transform: translate(1098px, 201px) rotate(18deg);
    transform: translate(1098px, 201px) rotate(18deg); } }
    @keyframes seven {
    from {
    -webkit-transform: translate(298px, 221px) rotate(-34deg);
    transform: translate(298px, 221px) rotate(-34deg); }
    12,5% {
    -webkit-transform: translate(398px, 159px) rotate(-28deg);
    transform: translate(398px, 159px) rotate(-28deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    25% {
    -webkit-transform: translate(498px, 127px) rotate(-20deg);
    transform: translate(498px, 127px) rotate(-20deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    37,5% {
    -webkit-transform: translate(598px, 125px) rotate(-12deg);
    transform: translate(598px, 125px) rotate(-12deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    50% {
    -webkit-transform: translate(698px, 127px) rotate(-8deg);

    transform: translate(698px, 127px) rotate(-8deg);


    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    62,5% {
    -webkit-transform: translate(798px, 131px) rotate(-2deg);
    transform: translate(798px, 131px) rotate(-2deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    75% {
    -webkit-transform: translate(898px, 141px) rotate(4deg);
    transform: translate(898px, 141px) rotate(4deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    87,5% {
    -webkit-transform: translate(998px, 161px) rotate(10deg);
    transform: translate(998px, 161px) rotate(10deg);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear; }
    to {
    -webkit-transform: translate(1098px, 201px) rotate(18deg);
    transform: translate(1098px, 201px) rotate(18deg); } }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="rect1"></div>
    <div id="rect2"></div>
    <div id="rect3"></div>
    <div id="rect4"></div>
    <div id="rect5"></div>
    <div id="rect6"></div>
    <div id="rect7"></div>
    </div>

    </body>
    </html>

    You might also like