Tag Archives: Css3

[CSS3]transitionプロパティで簡単なアニメーション

CSS3のtransitionプロパティを使ってアニメーションを作ってみた。
※Chrome,SafariなどのWebkit系でしか動作しないので注意

コードは簡単で以下の3つのプロパティを設定するだけ

・-webkit-transition-property
→transition を適用するプロパティ

・-webkit-transition-duration
→transition の変化をどれくらいで表現するか
 とりあえず、1s(1秒?)で設定

・-webkit-transition-timing-function
→変化の具合を設定。
 いくつか設定できるみたい。
 今回のサンプルは選択できるようにしてみた。

以下、サンプルのCSS

#sample{
    width: 240px;
    height: 120px;
    background-color: #FF33FF;
    -webkit-transition-property: background-color, width, height;  
    -webkit-transition-duration: 1s;  
    -webkit-transition-timing-function: linear;
    
}  
#sample:hover{  
    background-color: #0000FF;
    width: 240px;
    height: 240px;
}

CSS3 transitionを使ってみる – jsdo.it – share JavaScript, HTML5 and CSS

[CSS3]radiusを使ってみた

CSS3をはじめてつかってみた。
とりあえず角丸を使ってみました。
ついでにHTML5のrangeも使ってますが。

CSS3 radiusを使ってみる – jsdo.it – share JavaScript, HTML5 and CSS