safariもたまには思い出してあげて下さい〜iphone safariの話〜

Safariもたまには思い出してあげて下さい～iPhone Safariの話～

nakamura001

2009/12/20

回転とリサイズのアニメ

画像を「360°回転」

.sample {(省略) -webkit-transform: rotate(0deg); -webkit-transition: 1s linear;}

.sample2 { -webkit-transform: rotate(360deg);}

CSS

360°回転

画像を「360°回転+縦幅を伸ばす」

.sample {(省略) height: 70px; -webkit-transform: rotate(0deg); -webkit-transition: 1s linear;}

.sample2 { -webkit-transform: rotate(360deg); height: 140px;}

CSS

360°回転しつつ縦の長さが伸びる

エフェクト

角丸

.sample1 { -webkit-border-radius: 10px;}

CSS

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-border-radius

-webkit-border-radius: 角丸の半径のサイズ





影を付ける

.sample2 { -webkit-border-radius: 10px; -webkit-box-shadow: 3px 3px 6px rgba(255, 0, 0, 0.5);}

CSS

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-box-shadow

-webkit-box-shadow: 水平方向のオフセット垂直方向のオフセットブラーのサイズ(半径)色

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html%23//apple_ref/css/property/-webkit-box-shadow




影を付ける

.sample3 { -webkit-border-radius: 10px; -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));}

CSS

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/Functions.html#//apple_ref/css/func/-webkit-gradient

-webkit-box-reflect: 反射させる位置反射画像との距離反射画像のマスク(省略可能)

-webkit-gradient(グラデーションの種類, 開始位置, 終了位置, (複数設定可能)グラデーション設定)



X軸回転

.sample {(省略) -webkit-transform-style: preserve-3d; -webkit-transition: -webkit-transform 1s linear}

CSS

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html

.sampleX { -webkit-transform: rotateX(180deg);}

タップ(クリック)するとクラスを追加



自動でX軸回転

.sample {(省略) -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-duration: 3.0s;}

CSS


自動的に回転し続ける



自動でX軸回転

CSS


@-webkit-keyframes ani_rotX{ from { -webkit-transform: rotateX(0deg); } to { -webkit-transform: rotateX(360deg); }}

.rotX { -webkit-animation-name: ani_rotX;}

自動的に回転し続ける



3D環境

3D回転

X軸で+45deg X軸で-45deg

Y軸で+45deg Y軸で-45deg

Z軸で+45deg Z軸で-45deg

3D回転

X軸で+45deg X軸で-45deg

Y軸で+45deg Y軸で-45deg

Z軸で+45deg Z軸で-45deg

X

Y

Z

画面と座標軸の関係

細かいアニメ制御


CSS

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW4

@-webkit-keyframes ani_move{ 0% { top: 0px; left: 0px; } 33% { top: 100px; left: 100px; } 66% { top: 100px; left: 0px; } 100% { top: 0px; left: 0px; }}

０%

33%66%

100%






CSS

.move { -webkit-animation-name: ani_move;}


@-webkit-keyframes ani_move{ 0% { top: 0px; left: 0px; } 33% { top: 100px; left: 100px; }(省略)}





フルスクリーンモード

設定方法

<meta name="apple-mobile-web-app-capable" content="yes" />

HTML

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/html/const/apple-mobile-web-app-capable

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html%23//apple_ref/html/const/apple-mobile-web-app-capable




おしまい

safariもたまには思い出してあげて下さい〜iphone safariの話〜

Education