ドットインストール - 3分動画でマスターできるプログラミング学習サービス

styles.css

body {
    padding: 64px;
}

.bx {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: orange;
    background-image: none;

    animation-name: move;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.bx p {
    margin: 0;
}

@keyframes move {
    50% {
        transform: translateX(200px) rotate(360deg);
        background-color: green;
    }
    100% {
        transform: translateX(300px) rotate(360deg);
        background-color: green;
        background-image: url(../img/logo.png) cover;
    }
}