.test1 {
    width:10%;
    animation: anim1 2s;
    background-color:red;
    margin:0;
    animation-delay: 0;
    animation-iteration-count: infinite;
}
header {
    text-align:center;
}
@keyframes anim1 {
    0% {
        transform: translateX(11%);
        transform: translateY(11%);
    }
    8% {
        transform: translateX(80%);
        transform: translateY(25%);
    }
    16% {
        transform: translateX(10%);
        transform: translateY(65%);
    }
    24% {
        transform: translateX(51%);
        transform: translateY(33%);
    }
    32% {
        transform: translateX(85%);
        transform: translateY(87%);
    }
    40% {
        transform: translateX(2%);
        transform: translateY(36%);
    }
    48% {
        transform: translateX(44%);
        transform: translateY(93%);
    }
    56% {
        transform: translateX(81%);
        transform: translateY(5%);
    }
    64% {
        transform: translateX(55%);
        transform: translateY(61%);
    }
    82% {
        transform: translateX(75%);
        transform: translateY(22%);
    }
    90% {
        transform: translateX(92%);
        transform: translateY(81%);
    }
    100% {
        transform: translateX(44%);
        transform: translateY(44%);
    }
    
}


.test1 {
transition-property: all;
}
.test1:hover {
background-color: blue;
}

.test2 {
transition-property: background-color;
}
.test2:hover {
background-color: cyan;
}

.test3 {
transition-property: background-color;
}
.test3:hover {
background-color: black;
}

.test4 {
transition-property: background-color;
}
.test4:hover {
background-color: pink;
}

.test5 {
transition-property: background-color;
}
.test5:hover {
background-color: gray;
}

.test6 {
transition-property: background-color;
}
.test6:hover {
background-color: purple;
}

.test7 {
transition-property: background-color;
}
.test7:hover {
background-color: brown;
}

.test8 {
transition-property: background-color;
}
.test8:hover {
background-color: orange;
}

.test9 {
transition-property: background-color;
}
.test9:hover {
background-color: green;
}

.test10 {
transition-property: background-color;
}
.test10:hover {
background-color: yellow;
}

.main {
    height:100%;
    display:flex;
}

main {
    height:100%;
}

body {
    height:1000px;
}

.test2 {
    width:10%;
    animation: anim2 2s;
    background-color:red;
    margin:0;
    animation-delay: 0;
    animation-iteration-count: infinite;
}

.ball {
    position:absolute;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;
    border: 1px solid #5c0000;
    background-color:green;
    width:10%;
    height:20%;
    animation: ball 2s;
    margin:0;
    animation-delay: 0;
    animation-iteration-count: infinite;
    transform-origin: center bottom;
}

@keyframes anim2 {
    0% {
        transform: translateX(33%);
        transform: translateY(33%);
    }
    8% {
        transform: translateX(12%);
        transform: translateY(12%);
    }
    16% {
        transform: translateX(62%);
        transform: translateY(62%);
    }
    24% {
        transform: translateX(34%);
        transform: translateY(34%);
    }
    32% {
        transform: translateX(11%);
        transform: translateY(11%);
    }
    40% {
        transform: translateX(55%);
        transform: translateY(55%);
    }
    48% {
        transform: translateX(80%);
        transform: translateY(80%);
    }
    56% {
        transform: translateX(92%);
        transform: translateY(92%);
    }
    64% {
        transform: translateX(14%);
        transform: translateY(14%);
    }
    82% {
        transform: translateX(55%);
        transform: translateY(55%);
    }
    90% {
        transform: translateX(31%);
        transform: translateY(31%);
    }
    100% {
        transform: translateX(71%);
        transform: translateY(71%);
    }
    
}

.test3 {
    width:10%;
    animation: anim3 2s;
    background-color:red;
    margin:0;
    animation-delay: 0;
    animation-iteration-count: infinite;
}

@keyframes anim3 {
    0% {
        transform: translateX(80%);
        transform: translateY(80%);
    }
    8% {
        transform: translateX(8%);
        transform: translateY(8%);
    }
    16% {
        transform: translateX(34%);
        transform: translateY(34%);
    }
    24% {
        transform: translateX(55%);
        transform: translateY(55%);
    }
    32% {
        transform: translateX(80%);
        transform: translateY(80%);
    }
    40% {
        transform: translateX(29%);
        transform: translateY(29%);
    }
    48% {
        transform: translateX(44%);
        transform: translateY(44%);
    }
    56% {
        transform: translateX(16%);
        transform: translateY(16%);
    }
    64% {
        transform: translateX(31%);
        transform: translateY(31%);
    }
    82% {
        transform: translateX(59%);
        transform: translateY(59%);
    }
    90% {
        transform: translateX(44%);
        transform: translateY(44%);
    }
    100% {
        transform: translateX(88%);
        transform: translateY(88%);
    }
    
}

.test4 {
    width:10%;
    animation: anim4 2s;
    background-color:red;
    margin:0;
    animation-delay: 0;
    animation-iteration-count: infinite;
}

@keyframes anim4 {
    0% {
        transform: translateX(64%);
        transform: translateY(64%);
    }
    8% {
        transform: translateX(93%);
        transform: translateY(93%);
    }
    16% {
        transform: translateX(55%);
        transform: translateY(55%);
    }
    24% {
        transform: translateX(74%);
        transform: translateY(74%);
    }
    32% {
        transform: translateX(41%);
        transform: translateY(41%);
    }
    40% {
        transform: translateX(21%);
        transform: translateY(21%);
    }
    48% {
        transform: translateX(54%);
        transform: translateY(54%);
    }
    56% {
        transform: translateX(23%);
        transform: translateY(23%);
    }
    64% {
        transform: translateX(62%);
        transform: translateY(62%);
    }
    82% {
        transform: translateX(80%);
        transform: translateY(80%);
    }
    90% {
        transform: translateX(44%);
        transform: translateY(44%);
    }
    100% {
        transform: translateX(71%);
        transform: translateY(71%);
    }
    
}

.test5 {
    width:10%;
    animation: anim5 2s;
    background-color:red;
    margin:0;
    animation-delay: 0;
    animation-iteration-count: infinite;
}

@keyframes anim5 {
    0% {
        transform: translateX(98%);
        transform: translateY(98%);
    }
    8% {
        transform: translateX(55%);
        transform: translateY(55%);
    }
    16% {
        transform: translateX(78%);
        transform: translateY(78%);
    }
    24% {
        transform: translateX(33%);
        transform: translateY(33%);
    }
    32% {
        transform: translateX(55%);
        transform: translateY(55%);
    }
    40% {
        transform: translateX(44%);
        transform: translateY(44%);
    }
    48% {
        transform: translateX(95%);
        transform: translateY(95%);
    }
    56% {
        transform: translateX(34%);
        transform: translateY(34%);
    }
    64% {
        transform: translateX(15%);
        transform: translateY(15%);
    }
    82% {
        transform: translateX(59%);
        transform: translateY(59%);
    }
    90% {
        transform: translateX(38%);
        transform: translateY(38%);
    }
    100% {
        transform: translateX(11%);
        transform: translateY(11%);
    }
    
}

.test6 {
    width:10%;
    animation: anim6 2s;
    background-color:red;
    margin:0;
    animation-delay: 0;
    animation-iteration-count: infinite;
}

@keyframes anim6 {
    0% {
        transform: translateX(5%);
        transform: translateY(5%);
    }
    8% {
        transform: translateX(71%);
        transform: translateY(71%);
    }
    16% {
        transform: translateX(35%);
        transform: translateY(35%);
    }
    24% {
        transform: translateX(66%);
        transform: translateY(66%);
    }
    32% {
        transform: translateX(35%);
        transform: translateY(35%);
    }
    40% {
        transform: translateX(41%);
        transform: translateY(41%);
    }
    48% {
        transform: translateX(9%);
        transform: translateY(9%);
    }
    56% {
        transform: translateX(70%);
        transform: translateY(70%);
    }
    64% {
        transform: translateX(48%);
        transform: translateY(48%);
    }
    82% {
        transform: translateX(90%);
        transform: translateY(90%);
    }
    90% {
        transform: translateX(74%);
        transform: translateY(74%);
    }
    100% {
        transform: translateX(34%);
        transform: translateY(34%);
    }
    
}

.test7 {
    width:10%;
    animation: anim7 2s;
    background-color:red;
    margin:0;
    animation-delay: 0;
    animation-iteration-count: infinite;
}

@keyframes anim7 {
    0% {
        transform: translateX(31%);
        transform: translateY(31%);
    }
    8% {
        transform: translateX(16%);
        transform: translateY(16%);
    }
    16% {
        transform: translateX(78%);
        transform: translateY(78%);
    }
    24% {
        transform: translateX(38%);
        transform: translateY(38%);
    }
    32% {
        transform: translateX(21%);
        transform: translateY(21%);
    }
    40% {
        transform: translateX(87%);
        transform: translateY(87%);
    }
    48% {
        transform: translateX(66%);
        transform: translateY(66%);
    }
    56% {
        transform: translateX(31%);
        transform: translateY(31%);
    }
    64% {
        transform: translateX(11%);
        transform: translateY(11%);
    }
    82% {
        transform: translateX(35%);
        transform: translateY(35%);
    }
    90% {
        transform: translateX(19%);
        transform: translateY(19%);
    }
    100% {
        transform: translateX(66%);
        transform: translateY(66%);
    }
    
}

.test8 {
    width:10%;
    animation: anim8 2s;
    background-color:red;
    margin:0;
    animation-delay: 0;
    animation-iteration-count: infinite;
}

@keyframes anim8 {
    0% {
        transform: translateX(48%);
        transform: translateY(48%);
    }
    8% {
        transform: translateX(31%);
        transform: translateY(31%);
    }
    16% {
        transform: translateX(66%);
        transform: translateY(66%);
    }
    24% {
        transform: translateX(41%);
        transform: translateY(41%);
    }
    32% {
        transform: translateX(87%);
        transform: translateY(87%);
    }
    40% {
        transform: translateX(47%);
        transform: translateY(47%);
    }
    48% {
        transform: translateX(77%);
        transform: translateY(77%);
    }
    56% {
        transform: translateX(99%);
        transform: translateY(99%);
    }
    64% {
        transform: translateX(31%);
        transform: translateY(31%);
    }
    82% {
        transform: translateX(7%);
        transform: translateY(7%);
    }
    90% {
        transform: translateX(47%);
        transform: translateY(47%);
    }
    100% {
        transform: translateX(21%);
        transform: translateY(21%);
    }
    
}

.test9 {
    width:10%;
    animation: anim9 2s;
    background-color:red;
    margin:0;
    animation-delay: 0;
    animation-iteration-count: infinite;
}

@keyframes anim9 {
    0% {
        transform: translateX(24%);
        transform: translateY(24%);
    }
    8% {
        transform: translateX(37%);
        transform: translateY(37%);
    }
    16% {
        transform: translateX(58%);
        transform: translateY(58%);
    }
    24% {
        transform: translateX(86%);
        transform: translateY(86%);
    }
    32% {
        transform: translateX(41%);
        transform: translateY(41%);
    }
    40% {
        transform: translateX(16%);
        transform: translateY(16%);
    }
    48% {
        transform: translateX(35%);
        transform: translateY(35%);
    }
    56% {
        transform: translateX(44%);
        transform: translateY(44%);
    }
    64% {
        transform: translateX(68%);
        transform: translateY(68%);
    }
    82% {
        transform: translateX(81%);
        transform: translateY(81%);
    }
    90% {
        transform: translateX(14%);
        transform: translateY(14%);
    }
    100% {
        transform: translateX(5%);
        transform: translateY(5%);
    }
    
}

.test10 {
    width:10%;
    animation: anim10 2s;
    background-color:red;
    margin:0;
    animation-delay: 0;
    animation-iteration-count: infinite;
}

@keyframes anim10 {
    0% {
        transform: translateX(66%);
        transform: translateY(66%);
    }
    8% {
        transform: translateX(22%);
        transform: translateY(22%);
    }
    16% {
        transform: translateX(36%);
        transform: translateY(36%);
    }
    24% {
        transform: translateX(9%);
        transform: translateY(9%);
    }
    32% {
        transform: translateX(91%);
        transform: translateY(91%);
    }
    40% {
        transform: translateX(77%);
        transform: translateY(77%);
    }
    48% {
        transform: translateX(44%);
        transform: translateY(44%);
    }
    56% {
        transform: translateX(66%);
        transform: translateY(66%);
    }
    64% {
        transform: translateX(14%);
        transform: translateY(14%);
    }
    82% {
        transform: translateX(26%);
        transform: translateY(26%);
    }
    90% {
        transform: translateX(71%);
        transform: translateY(71%);
    }
    100% {
        transform: translateX(32%);
        transform: translateY(32%);
    }
    
}


@keyframes ball {
    0% {
        transform: translateX(11%);
        transform: translateY(99%);
    }
    8% {
        transform: translateX(80%);
        transform: translateY(25%);
    }
    16% {
        transform: translateX(10%);
        transform: translateY(65%);
    }
    24% {
        transform: translateX(51%);
        transform: translateY(33%);
    }
    32% {
        transform: translateX(85%);
        transform: translateY(87%);
    }
    40% {
        transform: translateX(2%);
        transform: translateY(36%);
    }
    48% {
        transform: translateX(44%);
        transform: translateY(93%);
    }
    56% {
        transform: translateX(81%);
        transform: translateY(5%);
    }
    64% {
        transform: translateX(55%);
        transform: translateY(61%);
    }
    82% {
        transform: translateX(75%);
        transform: translateY(22%);
    }
    90% {
        transform: translateX(92%);
        transform: translateY(81%);
    }
    100% {
        transform: translateX(44%);
        transform: translateY(44%);
    }
    
}