CSSで渦を巻きながら飛び出すアニメーション

渦巻きアニメーション

before 要素などを駆使すれば1つの要素でも何となく似たようなことは出来るのですが、色々変更が効くように3つの要素を使って作ってみます。

HTML

<div class="uzu-wrapper"><div class="uzu-pole"><div class="uzu-elm"></div></div></div>

ラッパーと軸と回転する要素そのものの3つです。

CSS

.uzu-wrapper {
    height: 50px; /* uzu-elm の大きさと合わせる */
    margin: 0 auto; /* 中央化 */
    width: 50px; /* uzu-elm の大きさと合わせる */
}


.uzu-pole {
    height: 50px; /* uzu-elm の大きさと合わせる */
    position: relative;
    transform-origin: calc(100% - 25px) center; /* calcの中身は100％から要素の幅(ここでは50)の半分をひく */
    transition: 1s; /* 回転速度 */
    width: 50px; /* uzu-elm の大きさと合わせる */
}

.uzu-elm {
    background-color: #55acee; /* 背景色 */
    border-radius: 50%;
    height: 50px; /* 要素の高さ */
    left: 0;
    position: absolute;
    top: 0;
    width: 50px; /* 要素の幅 */
}

.uzu-wrapper:hover .uzu-pole {
    margin-left: -150px; /* 渦の最大半径(ここでは200)から要素の幅(ここでは50)を引いたものにマイナス */
    transform: rotate(1080deg); /* 回転量 360degで一周 */
    width: 200px; /* 渦の最大半径 */
}

細かくいろいろ書いてありますが位置調整のための計算です。50px ✕ 50px の要素をうずまき回転させている設定。

サンプル

下の青い要素にマウスカーソルを重ねるとくるくるっと渦を巻きます。

なぜ渦を巻くのか

なぜ渦を巻くようにアニメーションするのかわかりやすくするために、uzu-pole 要素、軸の要素に背景色を付けてみます。少しゆっくりにもしています。

アニメーションをしているのは丸い要素ではなく、軸の要素だけです。丸い要素はただ軸に張り付いているだけ。

軸の要素を伸ばす＆回転させるのアニメーションをさせることで、あたかも丸い要素が渦を巻いているように見えます。微調整のために細かく計算していますが仕組みは単純です。

応用

文字入れ

.uzu-elm の中にテキストを入れれば文字も回転します。

アニメーションの変更

transition や rotate をマイナスにすることで、回転速度や回転方向を変更できます。

.uzu-wrapper {
    height: 50px; /* uzu-elm の大きさと合わせる */
    margin: 0 auto; /* 中央化 */
    width: 50px; /* uzu-elm の大きさと合わせる */
}


.uzu-pole {
    height: 50px; /* uzu-elm の大きさと合わせる */
    position: relative;
    transform-origin: calc(100% - 25px) center; /* calcの中身は100％から要素の幅(ここでは50)の半分をひく */
    transition: 3s; /* 回転速度 */
    width: 50px; /* uzu-elm の大きさと合わせる */
}

.uzu-elm {
    background-color: #55acee; /* 背景色 */
    border-radius: 50%;
    height: 50px; /* 要素の高さ */
    left: 0;
    position: absolute;
    top: 0;
    width: 50px; /* 要素の幅 */
}

.uzu-wrapper:hover .uzu-pole {
    margin-left: -150px; /* 渦の最大半径(ここでは200)から要素の幅(ここでは50)を引いたものにマイナス */
    transform: rotate(-3600deg); /* 回転量 360degで一周 */
    width: 200px; /* 渦の最大半径 */
}

渦の最大半径や背景色、要素を丸くするかどうかなんかも当然変更可能です。

まとめ

どこで使うのかといわれたらよくわからないアニメーションです。例えばボタンにこのアニメーションを適用させるとマウスからボタンが逃げていってしまうため使わないほうが良いです。

未来感のある動きだとは思うのでスパイス液に使えばアニメーションが華やかになるかもしれないです。

追記：記事を書き終わったあとに「渦にするならもしかして transform の translate と rotate 組み合わせるだけでいけるのでは」と思いつきました。もっと簡単にかけます。

HTML

<div class="uzu-wrapper"><div class="uzu-elm"></div></div>

軸 pole はいりません。要素2つで十分です。

CSS

.uzu-wrapper {
    height: 50px;
    margin: 0 auto;
    width: 50px;
}

.uzu-elm {
    background-color: #55acee;
    border-radius: 50%;
    height: 50px;
    transition: 1s;
    width: 50px;
}
.uzu-wrapper:hover .uzu-elm {
    transform: rotate(1080deg) translateX(-150px); /* 正負で回転方向が逆になる */
}

CSSでの計算がだいぶなくなりました。transform-origin の計算もなくいけちゃいますね。