画像をユラユラ動かす

DEMO

HTMLとCSSをまとめてコピーする

HTML

		<img src="画像URL" class="yurayura">
HTMLをコピーする

HTML説明

「画像URL」という部分を書き換えてください。

CSS

		<style>
.yurayura{
transform-origin: center bottom;
animation: yurayura 1.5s linear infinite;
width: 100%;
margin: 0 auto;
}

@keyframes yurayura {
  0% , 100%{
      transform: rotate(5deg);
  }
  50%{
      transform: rotate(-5deg);
  }
}
</style>
cssをコピーする

CSS説明

アニメーションの調整方法
動きの速さの調整
4行目の「●●s」の数値を変更してください。

傾き角度の調整
11行目・14行目の「●●deg」の数値を変更してください。