.large {
    position: relative;
    /*animation-name: example;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;*/
    animation-fill-mode: forwards;
    animation: example 2s ease-in-out 0s 1 normal;
    transition: width 2s, height 4s, transform 2s;
    transition-timing-function: ease-in-out;
    transform-origin: 200%;
}

.tata {
    position: relative;
    animation: tata 2s ease-in-out 0s 1 normal;
}

.size {
    position: relative;
    animation: size 2s ease-in-out 0s 1 normal;
}

.rata {
    position: relative;
    animation: size 2s ease-in-out 0s 1 normal;
}

.para {
    position: relative;
    animation: arrange 2s ease-in-out 0s 1 normal;
}

.well3 {
    position: relative;
    animation: arrange 2s ease-in-out 0s 1 normal;
}

.well1 {
    position: relative;
    animation: arrange 2s ease-in-out 0s 1 normal;
}

.well2 {
    position: relative;
    animation: arrange 2s ease-in-out 0s 1 normal;
}

.shit {
    position: relative;
    animation: arrange 2s ease-in-out 0s 1 normal;
}

.normal {
    position: relative;
    animation: arrange 2s ease-in-out 0s 1 normal;
}

.boom {
    position: relative;
    animation: boom 2s ease-in-out 0s 1 normal;
}

.wow {
    position: relative;
    animation: size 2s ease-in-out 0s 1 normal;
}

.well {
    position: relative;
    animation: size 2s ease-in-out 0s 1 normal;
}

.bell {
    position: relative;
    animation: size 2s ease-in-out 0s 1 normal;
}

.nope {
    position: relative;
    animation: size 2s ease-in-out 0s 1 normal;
}

.flops {
    position: relative;
    animation: size 2s ease-in-out 0s 1 normal;
}

.jovan {
    position: relative;
    animation: zip 2s ease-in-out 0s 1 normal;
}

.active.pro1 {
    position: relative;
    animation: arrange 2s ease-in-out 0s 1 normal;
}

.active.pro4 {
    position: relative;
    animation: rerange 2s ease-in-out 0s 1 normal;
}

.active.pro3 {
    position: relative;
    animation: boom 2s ease-in-out 0s 1 normal;
}

.angry {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background-color: red;
    position: relative;
    animation: circle 50s ease-in-out 1s infinite normal;
    transform-origin: 200%;
    transition: 1s all ease;
}

.angry:hover {
    width: 200px;
    height: 200px;
    animation: centyy 10s ease-in-out 0s 1 normal;
}

.not {
    opacity: 0;
    transition: 1s all ease;
    font-size: 50px;
}

.not:hover {
    opacity: 1;
    font-size: 20px;

}

.dcare {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background-color: yellow;
    position: relative;
    animation: circle 40s ease-in-out 1s infinite normal;
    transform-origin: 200%;
    transition: 1s all ease;
}

.dcare:hover {
    width: 200px;
    height: 200px;
    animation: centey 10s ease-in-out 0s 1 normal;
}

.forku {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background-color: green;
    position: relative;
    animation: circle 30s ease-in-out 1s infinite normal;
    transform-origin: 200%;
    transition: 1s all ease;
}

.forku:hover {
    width: 200px;
    height: 200px;
    animation: centry 10s ease-in-out 0s 1 normal;
}

.shift {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background-color: blue;
    position: relative;
    animation: circle 20s ease-in-out 1s infinite normal;
    transform-origin: 200%;
    transition: 1s all ease;
}

.shift:hover {
    width: 200px;
    height: 200px;
    animation: centre 10s ease-in-out 0s 1 normal;
}

.getat {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background-color: purple;
    position: relative;
    animation: circle 10s ease-in-out 1s infinite normal;
    transform-origin: 200%;
    transition: 1s all ease;
    margin-left: 25%;
    margin-top: 220px;
    margin-bottom: 220px;
}

.getat:hover {
    width: 200px;
    height: 200px;
    animation: center 10s ease-in-out 0s 1 normal;
}
@keyframes circle {
    0% {transform: rotate(0deg);}
    20% {transform: rotate(72deg);}
    40% {transform: rotate(144deg);}
    60% {transform: rotate(216deg);}
    80% {transform: rotate(288deg);}
    100% {transform: rotate(360deg);}
}

/*@keyframes center {
    0% {top: 0px; left: 0px;}
    100% {top: 0px; left: 0px;}
}

@keyframes centre {
    0% {top: -200px; left: 200px;}
    100% {top: -200px; left: 200px;}
}

@keyframes centry {
    0% {top: 200px; left: 200px;}
    100% {top: 200px; left: 200px;}
}

@keyframes centey {
    0% {top: 200px; left: -200px;}
    100% {top: 200px; left: -200px;}
}

@keyframes centyy {
    0% {top: -200px; left: 0px;}
    100% {top: -200px; left: 0px;}
}*/

@keyframes example { 
    0% {left: 0px; top: -200px;}
    50% {left: 0px; top: 20px;}
    100% {left: 0px; top: 0px;}
}

@keyframes style {
    0% {background-position: 1500px}
    50% {background-position: 600px;}
    100% {background-position: bottom right;}
}

@keyframes styles {
    0% {background-position-y: -700px;}
    50% {background-position-y: 300px;}
    100% {background-position: left;}
}

@keyframes mstyles {
    0% {background-position-y: -700px;}
    50% {background-position-y: 100px;}
    100% {background-position: top;}
}

@keyframes boom {
    0% {left: 0px; top: 400px;}
    50% {left: 0px; top: -30px;}
    100% {left: 0px; top: 0px;}
}
@keyframes tata {
    0% {left: 0px; top: -200px;}
    50% {left: 0px; top: 20px;}
    100% {left: 0px; top: 0px;}
}

@keyframes size {
    0% {left: 0px; top: -200px;}
    50% {left: 0px; top: 20px;}
    100% {left: 0px; top: 0px; }
}

@keyframes zip {
    0% {left: 0px; top: 200px;}
    50% {left: 0px; top: -20px;}
    100% {left: 0px; top: 0px; }
}

@keyframes rata {
    0% {left: 0px; top: -200px;}
    50% {left: 0px; top: 20px;}
    100% {left: 0px; top: 0px;}
}

@keyframes arrange {
    0% {left: -200px; top: 0px;}
    50% {left: 20px; top: 0px;}
    100% {left: 0px; top: 0px;}
}

@keyframes rerange {
    0% {left: 200px; top: 0px;}
    50% {left: -20px; top: 0px;}
    100% {left: 0px; top: 0px;}
}

@keyframes boom {
    0% {left: 0px; top: 600px;}
    50% {left: 0px; top: -40px;}
    100% {left: 0px; top: 0px;}
}