@charset "UTF-8";



.container {
        width:500px;
        height:300px;
        background: #AFC87D;
        position: relative;
}

.animal1{
        top: 35px;
        left: 205px;
        width:90px;
        height:90px;
        background: #864A2B;
        float: left;
        position: absolute;
        z-index: 10;
}

.animal2{
        top: 155px;
        left: 85px;
        width:90px;
        height:90px;
        background: #864A2B;
        float: left;
        position: absolute;
        z-index: 10;
}

.animal3{
        top: 35px;
        left: 325px;
        width:90px;
        height:90px;
        background: #864A2B;
        float: left;
        position: absolute;
        z-index: 10;
}

.animal4{
        top: 155px;
        left: 205px;
        width:90px;
        height:90px;
        background: #864A2B;
        float: left;
        position: absolute;
        z-index: 10;
}

.animal5{
        top: 35px;
        left: 85px;
        width:90px;
        height:90px;
        background: #864A2B;
        float: left;
        position: absolute;
        z-index: 10;
}

.animal6{
        top: 155px;
        left: 325px;
        width:90px;
        height:90px;
        background: #864A2B;
        float: left;
        position: absolute;
        z-index: 10;
        animation: scaling 2s linear infinite;
}

.clear{
        top: 35px;
        left: 205px;
        width:90px;
        height:90px;
        background-image:url("../parts/foxClear.png");
        background-repeat: no-repeat;
        background-position:50% 50%;
        background-size:contain;
        float: left;
        position: absolute;
        z-index: 1;
}


@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes scaling {
   0% {transform: scale(1);}
   50% {transform: scale(1.4);}
   100% {transform: scale(1);}
}

@keyframes updown {
   0% {transform: translateY(0px);}
   50% {transform: translateY(-10px);}
   100% {transform: translateY(0px);}
}

@keyframes downup {
   0% {transform: translateY(0px);}
   50% {transform: translateY(10px);}
   100% {transform: translateY(0px);}
}

@keyframes formation {
   0% {transform: skew(0deg,0deg);}
   50% {transform: skew(10deg,10deg);}
   100% {transform: skew(0deg,0deg);}
}

@keyframes varformation {
   0% {transform: skew(0deg,0deg);}
   50% {transform: skew(-10deg,-10deg);}
   100% {transform: skew(0deg,0deg);}
}

@keyframes standing {
   0% {transform: scale(1);}
   80% {transform: scale(1);}
   90% {transform: scale(1.4);}
   100% {transform: scale(1);}
}

@keyframes rotatey {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.rotate div{
        animation: rotate 6s infinite linear;
}

.rotate2 div{
        animation: rotate 3s infinite linear;
}

.move div {
        animation: updown 12s infinite linear;
}

.move2 div {
        animation: downup 12s infinite linear;
}

.strain div {
        animation: formation 1s infinite linear;

}

.strain2 div {
        animation: varformation 1s infinite linear;
}

.stand div {
        animation: standing 5s linear infinite;
}

.coin div {
        animation: rotatey 2s infinite linear;
}