むにむに

ソースコード

あくまでも一例なので参考程度に使ってください。

むにむにHTML

<img src="画像のパス.png" class="muni2">

ばいんばいんCSS

/* 例は常時むにむに */
.sample {
	margin: 0 auto;
	padding: 30px 0;
	display: block;
	max-width:207px;
}
img.muni2 {
	margin:0 auto ;
	display:block;
	width:80%;
	height:auto;
	animation: muni2 2s linear 0s infinite forwards;
	transform-origin: 50% 100%;
}
img.muni2-b {
	margin:0 auto ;
	display:block;
	width:80%;
	height:auto;
	transform-origin: 50% 100%;
}
img.muni2-b:hover {
	animation: muni2 2s linear 0s infinite forwards;
}

@keyframes muni2 {
	  0% { transform: scale(1,1); }
	 25% { transform: scale(1.1,.9); }
	 50% { transform: scale(1,1); }
	 75% { transform: scale(1.08,.85); }
	100% { transform: scale(1,1); }
}

使い方

• ちょっとこのキャラクター「むにむに」させてくれぃ！
• エラー通知を気づかせたいから「むにむに」させておきたいなー