定番
新着
履歴

CSS3 震える表現

CSS3 震える表現

画像や文字がアニメーションすると、どうしても見てしまいます。

縦と横それぞれに揺らす表現は以前紹介しました。

縦と横の動きを混ぜることで、シャッフルするような表現ができます。

震える演出
背景あり

classを指定して、CSSのみのアニメーションです。

.demo_div{
	width: 100px;
	height:100px;
	animation: furu 2.2s infinite;
	background-color:#559;
	color:#FFF;
	text-align:center;
	line-height:100px;
}
@keyframes furu {
    0% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    2% {
        transform: translate(2px, 2px) rotateZ(2deg)
    }
    4% {
        transform: translate(0px, 2px) rotateZ(0deg)
    }
    6% {
        transform: translate(2px, 0px) rotateZ(-2deg)
    }
    8% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    10% {
        transform: translate(2px, 2px) rotateZ(2deg)
    }
    12% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    14% {
        transform: translate(2px, 0px) rotateZ(-2deg)
    }
    16% {
        transform: translate(0px, 2px) rotateZ(0deg)
    }
    18% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    100% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
}
2017-12-18 21:42:54
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top