｢叫ぶ｣文章を魅力的に表現する！震えるCSSアニメーション【5選】

ブログ ブログ-ネタ

｢うんこぉぉぉぉおおおおおおおおおおおおおおおおおおおお！！！｣

叫ぶ男性の画像
叫び

｢叫び｣を表すのに丁度いいCSSアニメーション【5選】

普段は口に出して言い辛い言葉でも、文章にしたらスラスラ書けてしまうことってありますよね！

いつもの私生活で感じた不満や出来事をブログで爆発させている人も多いんじゃないですか？

今回はそんなブログの叫びに使えるCSSアニメーションを用意しました

ぜひその思いのたけを文章であらわして震わせてみましょう♪

縦揺れ

うわあああああああああああ！！！

.buru1{animation: buru1 .1s  infinite;}
@keyframes buru1{
0%{transform: translate(0px, 0px) rotateZ(0deg);}
50%{transform: translate(0px, 4px) rotateZ(0deg);}
100%{transform: translate(0px, 0px) rotateZ(0deg);}
}

シンプルな縦揺れのアニメーションです

驚いた時や喜び感を演出したい時に使えます

横揺れ

ほんぎゃあああああああああ！！！

.buru2{animation: buru2 .1s  infinite;}
@keyframes buru2{
0%{transform: translate(0px, 0px) rotateZ(0deg);}
50%{transform: translate(4px, 0px) rotateZ(0deg);}
100%{transform: translate(0px, 0px) rotateZ(0deg);}
}

上と同じくシンプルな横揺れアニメーションです

パニックな感じが溢れ出ていますね！

斜揺れ

のほおおおおおおおおおおお！！！

.buru3{animation: buru3 .1s  infinite;}
@keyframes buru3{
0%{transform: translate(0px, 0px) rotateZ(0deg);}
50%{transform: translate(4px, 4px) rotateZ(0deg);}
100%{transform: translate(0px, 0px) rotateZ(0deg);}
}

さらにもっと強いく荒ぶりたいときには斜めに揺らしましょう

より一層激しい叫びが協調できます

時間差

そっぷん！！！

.buru4{animation: buru4 2s  infinite;}
@keyframes buru4{
0%{transform: translate(0px, 0px) rotateZ(0deg);}
2%{transform: translate(4px, 2px) rotateZ(0deg);}
4%{transform: translate(0px, 2px) rotateZ(0deg);}
6%{transform: translate(0px, 0px) rotateZ(0deg);}
8%{transform: translate(4px, 0px) rotateZ(0deg);}
10%{transform: translate(0px, 0px) rotateZ(0deg);
100%{transform: translate(0px, 0px) rotateZ(0deg);}
}

途中で動きを止めることによって、ブルっとした動きが付けられます

工夫次第でホラーっぽい表現とかにも使えそうですね

ゆらゆら

あふぁ～～～ぬ！！！

.buru5{animation: buru5 5s infinite;}
@keyframes buru5{
0%{transform: translate(0px, 0px) rotateZ(0deg);}
50%{transform: translate(0px, 10px) rotateZ(0deg);}
100%{transform: translate(0px, 0px) rotateZ(0deg);}
}

animationの時間を0.1s(秒)から5s(秒)に変えれば、ゆらゆらと震えさせられます

ふわふわした感じで楽しいですね♪

適用方法

使いたいCSSアニメーションを｢ダッシュボード→デザイン｣のCSSに加えて、

カスタマイズの場所説明画像
カスタマイズの中に加える！！

あとはHTML編集でタグの中にclassを追加するだけ！

<p class="buru1">のほおおおおおおおおおおお！！！</p>

のほおおおおおおおおおおお！！！

テキストだけでなく画像にも使えます♪

色々試してみて、より文章表現を盛り上げてみましょう！！

1UP♪