webkit | HTML5+CSS3でサイトを作ってみる。

■ 伸縮・移動・透過

ここでは主に移動・透過・伸縮に関するコードを掲載します。
ここはwebkitを使ったサンプルページでしたが、firefoxにも対応させました。(2013/2/1)

伸縮

スマートフォン＆PCに対応している。

[ 伸縮のサンプル ]

サンプルhtml

--[ html ]-----------------------

<div class="shinshuku"></div>

--[ CSS ]-----------------------

div.shinshuku {
-moz-animation: anime1 5s ease -2s infinite alternate;
-webkit-animation: anime1 5s ease -2s infinite alternate;
animation: anime1 5s ease -2s infinite alternate;
}
@-moz-keyframes anime1 {
	0%	{ width: 50px; height: 20px; background-color: #000; }
	100%	{ width: 200px; height: 20px; background-color: #396;}
}

@-webkit-keyframes anime1 {
	0%	{ width: 50px; height: 20px; background-color: #000;}
	100%	{ width: 200px; height: 20px; background-color: #396;}
}

@keyframes anime1 {
	0%	{ width: 50px; height: 20px; background-color: #000; }
	100%	{ width: 200px; height: 20px; background-color: #396;}
}

移動

スマートフォン＆PCに対応している。

サンプルhtml

--[ html ]-----------------------
<p>linear</p>
<div id="t01"><img src="./img/flower.png" alt="*" /></div>

<p>ease</p>
<div id="t02"><img src="./img/flower.png" alt="*" /></div>

<p>ease-in</p>
<div id="t03"><img src="./img/flower.png" alt="*" /></div>

<p>ease-out</p>
<div id="t04"><img src="./img/flower.png" alt="*" /></div>

<p>ease-in-out</p>
<div id="t05"><img src="./img/flower.png" alt="*" /></div>

--[ CSS ]-----------------------

@keyframes move {

	0%	{top: 0;}
	100%	{top: 50px;}

}
@-webkit-keyframes move {

	0%	{top: 0;}
	100%	{top: 50px;}

}

.ListStyle01 img	{
	position: relative;		top: 0;
	left: 0;
	-webkit-animation:move 5s infinite alternate;
	-moz-animation:move 5s infinite alternate;
	animation:move 5s infinite alternate;
	}

#t01 img	{
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	animation-timing-function: linear;
}
#t02 img	{
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	animation-timing-function: ease;
}
#t03 img	{
	-webkit-animation-timing-function: ease-in;
	-moz-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
}
#t04 img	{
	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}
#t05 img	{
	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}

ロールオーバー・フェードイン

スマートフォン＆PCに対応している。

[ ロールオーバーで透過する ]

サンプルhtml

--[ html ]-----------------------

<div class="touka"><img src="./img/ball.png" width="50px" height="49px"></div>

--[ CSS ]-----------------------

.touka {
	width: 50px;
	height: 49px;
	opacity: 1;
	-webkit-transition: opacity 1s linear;
	-webkit-transform-origin: 50% 50%;
	transition: opacity 1s linear;
	transform-origin: 50% 50%;
}

.touka:hover {
	opacity: 0;
}

[ フェードイン（クリックするとページごとフェードインします。） ]

Button

ボタンフェードインサンプルコード

--[ html ]-----------------------

<div id="sample01"><a href="#">Button</a></div>

--[ CSS ]-----------------------

@-webkit-keyframes button {
	0%	{background-color: rgba(0,0,0,0.5);}
	100%	{background-color: rgba(0,0,0,0);}
}
@keyframes button {
	0%	{background-color: rgba(0,0,0,0.5);}
	100%	{background-color: rgba(0,0,0,0);}
}
div#bt_fade_in	{
	background-image: url("../img/button.png");
	width: 100px;			margin:10px;
	-webkit-border-radius: 5px;	-moz-border-radius: 5px;
	-webkit-box-shadow: 3px 3px 3px #aaa;
	-moz-box-shadow: 3px 3px 3px #aaa;
	box-shadow: 3px 3px 3px #aaa;
	}


div#bt_fade_in a	{
	background-color: rgba(0,0,0,0.5);
	color: white;			display: block;
	line-height: 30px;		-webkit-border-radius: 6px;
	-moz-border-radius: 6px;	border-radius: 6px;		font-size: 1em;
	font-weight: bold;
	font-family: Verdana, Helvetica, sans-serif;
	text-align: center;		text-shadow: 1px 1px 5px black;
	text-decoration: none;
	}
 
div#bt_fade_in a:hover	{
	background-color: rgba(0,0,0,0);
	-webkit-animation: button 1s ease-out 1 ;
	animation: button 1s ease-out 1 ;
	}

ページごとフェードインサンプルコード


--[ html ]-----------------------

<body id="pg_fadein">
(bodyタグにスタイルを掛ける。id名はつけてもつけなくても可。)

--[ CSS ]-----------------------
@-webkit-keyframes fadein {

	0%	{
	opacity: 0;
	background-color: white;
	}
	100%	{
	opacity: 1;
	background-color: white;
	}
}

body#pg_fadein {
	-webkit-animation-name: fadein;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
}