クリエイター：コーディング備忘録ブログ

RSS

コーディング

【css】Transition

2017.02.09

■プロパティに変化があった際に用いる、簡単な動作に適している
・疑似クラス　:hover など変化など

■DEMO
ホバーするとボックスが四角から丸にかわる

＜html＞

<div class="box"><p>DEMO<p/></div>

1	<div class="box"><p>DEMO<p/></div>

＜css＞

.box {
  width: 100px;
  height: 100px;
  background: #000;
  transition: all 300ms 0s ease;
}

.box:hover {
  background: #ccc;
  width: 100px;
  border-radius: 100%;
}

p{
  color: #fff;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

.box {

width: 100px;

height: 100px;

background: #000;

transition: all 300ms 0s ease;

}

.box:hover {

background: #ccc;

width: 100px;

border-radius: 100%;

}

p{

color: #fff;

height: 100px;

line-height: 100px;

text-align: center;

}

■参考
　CSSアニメーション入門

この記事を見た人は次の記事も見ています。

【Google Adwords】GDN ターゲティング設定

前の記事

font-size

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

第六回「WordPressにgooglemapを挿入する方法」

2016.04.11

コーディング

HTMLラジオボタンとチェックボックス

2021.08.17

コーディング

IE8で:beforeなど疑似要素が適用されない場合

2018.01.05

コーディング

【イラストレーター】ダイレクト選択ツール

2020.10.12

コーディング

動的に要素にclassを付与する

2017.12.05

コーディング

第二十一回「一括置換で時間短縮」

2016.05.09