LPやHP、ブログで、ボタンやバナーがぷるぷる動いているアニメーション。
申込みや、問い合わせなど、お客様が迷わないように、動きを付ける方法をコピペでできるコードを記載します。
目次
よこにゆらゆら優しく揺れる
HTML
<p class="yokoyure"><img src="画像のURL"/></p>css
.yokoyure {
animation-name:yokoyure1; /* アニメーション名の指定 */
animation-delay:0s; /* アニメーションの開始時間指定 */
animation-duration: 3s; /* アニメーション動作時間の指定 */
animation-timing-function: ease-in-out; /* アニメーションの動き指定（徐々に早く）*/
animation-iteration-count: infinite;
}
@keyframes yokoyure1 {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(1);
}
}
コメント