コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

最近寒いからテキストもブルブルと震え出すのですよ

CSS
ブルブルする

最近他の方のブログを見ているとテキストや画像が荒ぶってる方を見かけるので僕も作ってみようと思いこんな記事を書きました。寒いとか関係ないですね。やりたくなると謎の機能を実装しだすのが僕です。

早速作っていきます。

.shake {
    animation: shaking .1s  infinite;
}

@keyframes shaking {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(3px, 3px) rotateZ(2deg)}
    50% {transform: translate(0px, 3px) rotateZ(0deg)}
    75% {transform: translate(3px, 0px) rotateZ(-2deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

できました。CSSにこれを貼り付けちゃうだけで出来るって便利ですね。
使い方も<span class="shake">[テキスト]</span>でできちゃうから楽ちん。

・使い方
animattion: [アニメーションの名前] [かかる時間] [アニメーションの時間進行の取り方] [アニメーションの開始時間] [繰り返しの回数] [アニメーションの反転再生] [再生中再生後の指定]で設定できるそうです。なお、省略した値は初期値になります。

初期設定を決めたら次は作成した[アニメーションの名前]の@keyframeをつくって、どういった動きをつけていくかを指定していく感じです。キーフレームの管理はパーセントで管理することになります。

ちなみに、transformの方では、動きとか傾きとか回転とか拡大・縮小などがいじれます。

早速試すよ

ただブルブルさせる文字を作るだけだったのに、前置きがすごい長くなってしまった。やっと実践できる！

すっごいぶるぶるするよ！！


f:id:andron:20170129221452p:plain


f:id:andron:20170129221500p:plain


f:id:andron:20170129221703p:plain

といったわけで、こんなことができるようになります。
ブログ記事を書くときの幅が広がりますね。あ…、テキストと言っておきながら画像を動かしてますね。


[トップへ]