Sat, May 27, 2017

CSS3 「Transitions」の効果的な使い方

「Carsonified」からCSS3のアニメーション機能である CSS Transitionsの効果的な使い方をご紹介します。

対応ブラウザ:Safari、Chrome、Firefox 3.7+、Opera 10.5x

■アニメーションで背景色を変更する

マウスオーバーで背景色を変更

CSSサンプル

#example-1 .example-area blockquote {
   background: #eee;
   ⋮

   transition: all .3s linear;
   -o-transition: all .3s linear;
   -moz-transition: all .3s linear;
   -webkit-transition: all .3s linear;
}
#example-1 .example-area blockquote:hover {
   background: #aaa;
}

デモページ

■アニメーションの速度を検証

1s、.75s、.5s、.25sのそれぞれの速度を検証。

CSSサンプル

#example-2 .item {
   background: #ccc;
   height: 30px;
   ⋮
}
.example-area .item {
   transition: all 1s linear;
   ⋮
}
.example-area .item-2 {
   transition-duration: .75s;
   ⋮
}
.example-area .item-3 {
   transition-duration: .5s;
   ⋮
}
.example-area .item-4 {
   transition-duration: .25s;
   ⋮
}
#example-2 .item:hover,
#example-2 .item:focus {
   height: 200px;
}

デモページ

■アニメーションでリンクの背景色を変更する

マウスオーバーでリンクの背景色を変更
スペースが小さいと、アニメーションは同じスピードでも遅く感じます。

CSSサンプル

#example-3 .item,
#example-3 .item {
   background: #fffef7;
   ⋮
}
#example-3 .item:hover,
#example-3 .item:focus {
   background: rgb(235, 111, 0);
   color: #fff;
}

デモページ

■カラーのアニメーション

一番目はtransparentを指定、二番目は背景色を指定、三番目は背景色の上に背景色を指定、
三番目のように一様な背景で自然に見せるには、四番目のRGBaを使用するのが有効です。

CSSサンプル

#example-4 .item {
   height: 75px;
   width: 75px;
   transition: background-color .5s linear;
   ⋮
}
#example-4 .item-1 { background: transparent; }
#example-4 .item-2 { background: #fffef7; }
#example-4 .item-3 { background: #fffef7; }
#example-4 .item-4 { background: rgba(255, 254, 247, 0); }

#example-4 .item:hover,
#example-4 .item:focus {
   background-color: rgb(235, 111, 0);
   background-color: rgba(235, 111, 0, 1);
}

デモページ

 

情報元:コリス
情報元:Sexy Interactions with CSS Transitions

この記事を共有 :

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Leave a Reply

Spam Protection by WP-SpamFree