CSSアニメーションサンプル2

S_Nis

2011-10-20 12:25:02

License: MIT License

Fork: 5

Fav: 0

View: 2827

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 0 lines
HTML 3 lines
CSS 41 lines

http://designblog.ecstudio.jp/htmlcss/css3animation_sample.html

CSSアニメーションサンプル2

CSSアニメーションサンプル2

http://designblog.ecstudio.jp/htmlcss/css3animation_sample.html<div class="horizontal"> <div class="box vertical"></div> </div>body { background-color: #DDDDDD; font: 30px sans-serif; } .box { width: 50px; height: 50px; background: #666666; } .vertical { -webkit-animation-name: VerticalAnimation; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; } .horizontal { -webkit-animation-name: HorizontalAnimation; -webkit-animation-duration: 0.8s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; } @-webkit-keyframes VerticalAnimation { 0% { -webkit-transform: translateY(0) scale(1.0); background: #666666; } 100% { -webkit-transform: translateY(250px) scale(5.0); background: #F00; } } @-webkit-keyframes HorizontalAnimation { 0% { -webkit-transform: translateX(0); } 100% { -webkit-transform: translateX(300px); } }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/sloD/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/S_Nis/sloD" title="CSSアニメーション サンプル2">CSSアニメーション サンプル2 - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code