/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Nov 25, 2019, 4:33:23 PM
    Author     : jcoch
*/
div.dragonfly{
    animation-name: dfly;
    animation-duration: 10s;
    transform: translate3d(200px,100px,0);
}

@keyframes dfly{
    0%{transform: translate3d(0,0,0);}
    50%{
        transform: translate3d(0,0,0);
    }
    80%{
    transform: translate3d(200px,200px,0);
    }
    100%{
        transform: translate3d(200px,100px, 100px);
    }
}

div.dragon1{
    background-image: url(images/dragonClip.jpg);
    background-size: contain;
    width: 180px;
    height: 148px;
    transform: rotate3d(0,1,0,180deg);
    animation-name: dragonflip;
    animation-duration: 3s;
}

@keyframes dragonflip{
    from{transform: rotate3d(0,0,0,0deg);}
    to{
        transform: rotate3d(0,1,0,180deg);
    }
}

#dropit2{
    animation-name: drop;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
#dropit1{
    animation-name: drop;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
#dropit3{
    animation-name: drop;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes drop{
    0%{transform: translatey(0);}
    100%{transform: translatey(1200px);}
}

@keyframes flip{
    0%{
        transform: rotate3d(0,0,0,0deg);
    }
    50%{
        transform: rotate3d(1,0,0,180deg);
    }
    100%{
        transform: rotate3d(0,0,0,0deg);
    }
}
@keyframes spin{
    0%{
        transform: rotate3d(0,0,0,0deg);
    }
    50%{
        transform: rotate3d(0,1,0,180deg);
    }
    100%{
        transform: rotate3d(0,0,0,0deg);
    }
}
@keyframes flipspin{
    0%{
        transform: rotate3d(0,0,0,0deg);
    }
    25%{
        transform: rotate3d(1,1,0,360deg);
        background-color: blue;
    }
    50%{
        transform: rotate3d(1,1,0, 0deg);
        background-color: green;
    }
    75%{
        transform: rotate3d(0,1,1,360deg);
        background-color: purple;
    }
    100%{
        transform: rotate3d(0,0,0,0deg);
    }
}

#flipspin{
    animation-name: flipspin;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
#flip3{
    animation-name: flip;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
#flip4{
    animation-name: flip;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
#spin3{
    animation-name: spin;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
#spin4{
    animation-name: spin;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

div.container{
    margin-top: 100px;
    margin-left: 100px;
        
    display: flex; 
    flex-wrap: wrap;
}

div.container > div{
    margin: 10px;
}


div.circle{
    
    padding: 50px;
    border-radius: 100px;
    
}

div.square{
    padding: 50px;
}

div.rectangle{
    padding: 50px 100px 50px 100px;
}

div.blue{
    background-color: blue;
}

div.red{
    background-color: red;
}
div.green{
    background-color: green;
}
div.purple{
    background-color: purple;
}