トップページ ＞ サイト内の画像をアニメーションで動かす手法まとめ ＞ ズームインする画像

画像が、拡大、縮小を繰り返し表示されます

 

ブログのどこかに置くと、なんだこりゃと思われるでしょうか？

 

見た目は、javascript使用見たいですが、こちらもCSＳのみで使えます

 

 

 

全体がズームイン

 

 

 

 

 

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

 

 

ＣＳＳ

 

 

#img07 img {
animation: animation07 2s infinite ease 1s both;
}

 

@keyframes animation07 {
from {
transform: scale(1,1);
}
to {
transform: scale(1.5,1.5);
}
}

 

#img07 img {
animation: animation07 2s infinite ease 1s both;
-webkit-animation: animation07 2s infinite ease 1s both;
}
@keyframes animation07 {
from {
transform: scale(1,1);
}
to {
transform: scale(1.5,1.5);
}
}
@-webkit-keyframes animation07 {
from {
-webkit-transform: scale(1,1);
}
to {
-webkit-transform: scale(1.5,1.5);
}
}

 

 

---

 

ワイドにズームイン

 

 

 

 

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

 

ｃｓｓ

 

 

#img08 img {
animation: animation08 2s infinite ease 1s both;
}

 

@keyframes animation08 {
from {
transform: scaleX(1);
}
to {
transform: scaleX(1.5);
}
}

 

#img08 img {
animation: animation08 2s infinite ease 1s both;
-webkit-animation: animation08 2s infinite ease 1s both;
}
@keyframes animation08 {
from {
transform: scaleX(1);
}
to {
transform: scaleX(1.5);
}
}
@-webkit-keyframes animation08 {
from {
-webkit-transform: scaleX(1);
}
to {
-webkit-transform: scaleX(1.5);
}
}

 

 

 

 

---

 

 

飛び出し拡大

 

 

 

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

 

 

ｃｓｓ

 

#img14 img {
transform-origin: 0% 100%;
animation: animation14 2s infinite ease 1s both;
}

 

@keyframes animation14 {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}

 

#img14 img {
transform-origin: 0% 100%;
-webkit-transform-origin: 0% 100%;
animation: animation14 2s infinite ease 1s both;
-webkit-animation: animation14 2s infinite ease 1s both;
}
@keyframes animation14 {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
@-webkit-keyframes animation14 {
from {
-webkit-transform: scale(0);
}
to {
-webkit-transform: scale(1);
}

 

 

---

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

---

関連ページ

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

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

斜め横に傾斜で動く画像

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

風車みたいに回る画像

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

横移動、縦移動の連動画像

水平横に行ったり来たり、上下に上げ下げのスライド移動する画像

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

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

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

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

一覧