右からひだりへ移動して戻る繰り返し

<div id="img05" class="sampleImg mb"><img src="<% pageDepth %>img/710094.jpg" style="width:320px;" alt="" /></div>

ＣＳＳ

#img05 img {
animation: animation05 2s infinite ease 1s both;
}

@keyframes animation05 {
from {
transform: translateX(0px);
}
to {
transform: translateX(50px);
}
}

#img05 img {
animation: animation05 2s infinite ease 1s both;
-webkit-animation: animation05 2s infinite ease 1s both;
}
@keyframes animation05 {
from {
transform: translateX(0px);
}
to {
transform: translateX(50px);
}
}
@-webkit-keyframes animation05 {
from {
-webkit-transform: translateX(0px);
}
to {
-webkit-transform: translateX(50px);
}
}

上下にずれ移動

<div id="img06" class="sampleImg mb"><img src="<% pageDepth %>img/710094.jpg" style="width:320px;" alt="" /></div>

ＣＳＳ

#img06 img {
animation: animation06 2s infinite ease 1s both;
}

@keyframes animation06 {
from {
transform: translateY(0px);
}
to {
transform: translateY(50px);
}
}

#img06 img {
animation: animation06 2s infinite ease 1s both;
-webkit-animation: animation06 2s infinite ease 1s both;
}
@keyframes animation06 {
from {
transform: translateY(0px);
}
to {
transform: translateY(50px);
}
}
@-webkit-keyframes animation06 {
from {
-webkit-transform: translateY(0px);
}
to {
-webkit-transform: translateY(50px);
}

今回は、webdrawer.net様のサイトを参考にさせていただきました
ありがとうございます
http://webdrawer.net/css/transform.html

関連ページ

横から縦回転まで色々動く画像の置き方

サイトを訪れた読者様が、なんでだろうと首をかしげる、そんな仕組み？横回転から前進回転とか各種の動きがＣＳＳ指定ですぐ作れます

ズームインする画像

ズームインする画像とは？画像が大きくなったり、小さくなったりするんです

斜め横に傾斜で動く画像

斜め横にスルーと傾斜で動く画像ヲおいてみました

風車みたいに回る画像

画像が風車のように回ります

ひし形表示で変形する画像

斜めひし形の画像が動きに合わせて変形します

記事中の画像、フォントがスクロールするとフェードインで現れる

記事をスクロールすると、画像、またはフォントが、スーと、動的作動？で、せり上がりの出現イメージアクションを導入する解説です

一覧