.banner {
    height: 100px;
    text-align: center;
    font: weight 700px;
    line-height: 100px;
    text-shadow: 3px 2px 3px #000;
    animation: change_background 15s infinite;
}

.frame{
    margin: 0px auto;
    width: 80%;
    height: 300px;
}

.frame div{
    float: left;
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: #1bb6d9;
    font-size: 30px;
    color: #ffffff;
    text-align: center;
    line-height: 200px;
    color: yellow;
}


.slider{
    animation: scroll 10s infinite;
    border: 5px solid red;
}


.round1{
    border: 5px dashed blue;
    border-radius: 0px 30px;
}

.round2{
    border: 5px dotted rgb(183, 23, 127);
    border-radius: 30px 0px;
}

@keyframes change_background{
    0%{
        background-color: red;
        font-size: 1em;
    }
    10%{
        background-color: rgb(200, 212, 21);
        font-size: 1.2em;
    }
    25%{
        background-color: rgb(123, 198, 10);
        font-size: 1.4em;
    }
    35%{
        background-color: rgb(11, 177, 22);
        font-size: 1.6em;
    }
    49%{
        background-color: rgb(63, 187, 209);
        font-size: 1.8em;
    }
    56%{
        background-color: rgb(21, 7, 215);
        font-size: 2.0em;
    }
    68%{
        background-color: rgb(218, 32, 171);
        font-size: 1.8em;
    }
    79%{
        background-color: rgb(79, 13, 52);
        font-size: 1.6em;
    }
    88%{
        background-color: rgb(0, 213, 255);
        font-size: 1.4em;
    }
    94%{
        background-color: red;
        font-size: 1.2em;
    }
    100%{
        background-color: rgb(86, 192, 123);
        font-size: 1em;
    }
}


.rotate{
    animation: rotate 5s infinite;
}


@keyframes scroll{
    0%{
        background-image: url(../images/1.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    20%{
        background-image: url(../images/2.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    40%{
        background-image: url(../images/3.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    60%{
        background-image: url(../images/4.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    80%{
        background-image: url(../images/5.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    100%{
        background-image: url(../images/6.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}

@keyframes rotate{
    0%{
        transform: rotate(20deg);
    }
    12%{
        transform: rotate(40deg);
    }
    24%{
        transform: rotate(60deg);
    }
    36%{
        transform: rotate(80deg);
    }
    48%{
        transform: rotate(100deg);
    }
    60%{
        transform: rotate(120deg);
    }
    72%{
        transform: rotate(140deg);
    }
    84%{
        transform: rotate(160deg);
    }
    100%{
        transform: rotate(180deg);
    }
}