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

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

.frame div {
    float: left;
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: aqua;
    font-size: 3em;
    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;
    border-radius: 30px 0px;
}

.rotate {
    background: teal;
    animation: rotate 10s infinite;
    font-size:1.5em;
    border: 2px double yellow;
}

@keyframes change_background {
    0% {
        background-color: #ff0000;
        font-size: 1em;
    }    
    8.333% {
        background-color: #ff8000;
        font-size: 1.2em;
    }
    16.667% {
        background-color: #ffff00;
        font-size: 1.4em;
    }
    25.000% {
        background-color: #80ff00;
        font-size: 1.6em;
    }
    33.333% {
        background-color: #00ff00;
        font-size: 1.8em;
    }
    41.667% {
        background-color: #00ff80;
        font-size: 0em;
    }
    50.000% {
        background-color: #00ffff;
        font-size: 2.2em;
    }
    58.333% {
        background-color: #0080ff;
        font-size: 2em;
    }
    66.667% {
        background-color: #0000ff;
        font-size: 1.8em;
    }
    75.000% {
        background-color: #8000ff;
        font-size: 1.6em;
    }
    88.333% {
        background-color: #343438;
        font-size: 1.4em;
    }
    91.667% {
        background-color: #ff8000;
        font-size: 1.2em
    }
    100.000% {
        background-color: #ff0000 ;
        font-size: 1em;
    }
}

@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%;
    }
    600% {
        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);
    }
}