ブログ

CSSで要素を動かす

by Yasuko

ほんの少し動かしたいだけなのに

いつも検索してはGoogle先生のお世話になってしまうので

自分のためにまとめておきます。

要素の背景が横方向に流れていきます

section {
    background: url(section_bg.png) repeat-x 0 0;
    animation: bgroop 100s linear infinite;
    background-size: cover;
    height: 100%;
    width: 100%;
}
@keyframes bgroop {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 100% 0
    }
}

要素がぽよよんとなります

.popping {
    animation: popping .3s ease-in forwards;
    will-change: transform
}

@keyframes popping {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    80% {
        opacity: .8;
        transform: scale(1.1)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

要素が斜め上下にふわふわします

.fuwafuwa {
    animation: fuwafuwa 3s linear infinite;
}
@keyframes fuwafuwa {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translate(5px,10px)
    }

    to {
        transform: translateY(0)
    }
}

要素が上下にふわふわします

.fuwafuwaTB {
    animation: fuwafuwaTB 1s linear infinite
}

@keyframes fuwafuwaTB {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }

    to {
        transform: translateY(0)
    }
}

要素が左右にコテコテします

.kotekote {
    animation: kotekote .8s steps(2) infinite
}

@keyframes kotekote {
    0% {
        transform: rotate(15deg)
    }

    to {
        transform: rotate(-15deg)
    }
}

要素がコロコロ転がってきます（ちょっと回転し過ぎて戻ります）

.korokoro {
    animation: 1.5s ease-in-out korokoro forwards;
}
@keyframes korokoro {
    0% {
        transform: translate(0) rotate(0)
    }

    90% {
        transform: translate(0) rotate(-370deg)
    }

    to {
        transform: translate(0) rotate(-360deg)
    }
}

要素が飛び出してきます

.prize_bg {
    transform: scale(1);
    animation: 1.5s prize_bg
}

@keyframes prize_bg {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

要素が回転し続けます

.rotate {
    background: url(bg_rotate.png) no-repeat center;
    background-size: cover;
    width: 50px;
    height: 50px;
    animation: rotate 30s infinite
}
@keyframes rotate {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}