CSS3でふわふわ浮遊

CSS3でふわふわ浮遊を実装する方法について紹介します。

ちなみにこうすると影がでるようになります。

@keyframes float {
    0% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.5);
        transform: translatey(0px);
    }
    50% {
        box-shadow: 0 25px 15px 0px rgba(0,0,0,0.0);
        transform: translatey(-20px);
    }
    100% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.5);
        transform: translatey(0px);
    }
}

また、この方法は、CSS3のアニメーションを使っているので、アニメーションの時間を変えることで、ふわふわの速さを変えることができます。

animation: float 3s ease-in-out infinite;

この部分の3sを変えることで、ふわふわの速さを変えることができます。

まとめ

CSS3でふわふわ浮遊を実装する方法について紹介しました。