横からぴょ～んと出てくる動き、CSS3のみで。

@CyberMameCANです。
jQueryが良い感じです！
もっともっと極めて行きたいものですな〜。
でも今日はCSS3のみです。

横からぴょ～んと出てくる動き、jQueryなどを利用しなければ実現できないと思っていたのですが、
今ではCSS3で出来てしまうのですね。
（角丸とかドロップシャドウだけではなかった・・・勉強不足。）
しかもJavaScriptより滑らかな動きな気がします。

デモ

下記コードはSafari（Chrome）限定です。
jQueryなどと一緒に使えば、少し遅らして出てくるっていうのも出来るかもですね。

サンプルコードです。

HTML

<div class="content" id="home">
	<h1>
		左より<br />
		ひょこっと出てきます。<br />
		Safari（Chrome)限定です。
	</h1>
	<p><img src="images/amakusa.jpg" width="300" /></p>
</div>

<h1>

左より<br />

ひょこっと出てきます。<br />

Safari（Chrome)限定です。

</h1>

</div>

CSS

@-webkit-keyframes home {
  0% { left: -500px; opacity: 0; }
  25% { left: -500px; opacity: 0; }
  50% { left: 10px; opacity: 1; }
  75% { left: -5px; }
  100% { left: 0; }
}
#home {
  -webkit-animation-name: home;
  -webkit-animation-duration: .75s;
  -webkit-animation-iteration-count: 1;
}
#home {
  padding-top: 50px;
  position: relative;
}
#home h2 {
  font-size: 100px;
  line-height: 90px;
  letter-spacing: -10px;
  text-transform: lowercase;
  color: #222222;
  margin-bottom: 20px;
}

@-webkit-keyframes home {

0% { left: -500px; opacity: 0; }

25% { left: -500px; opacity: 0; }

50% { left: 10px; opacity: 1; }

75% { left: -5px; }

100% { left: 0; }

}

#home {

-webkit-animation-name: home;

-webkit-animation-duration: .75s;

-webkit-animation-iteration-count: 1;

}

#home {

padding-top: 50px;

position: relative;

}

#home h2 {

font-size: 100px;

line-height: 90px;

letter-spacing: -10px;

text-transform: lowercase;

color: #222222;

margin-bottom: 20px;

}

月	火	水	木	金	土	日
« 4月				6月 »
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

サイバーまめカン鹿児島の出水市でプログラミングしてる人のブログ

MacとSwift, Ruby, Pythonと温い日常。Linuxも少々。