CSS の学習._html/css_WEB-ITnose

「このプロパティが変更されるたびに、その変更をゆっくりと適用します。」

プロパティ transition: width 2s は、「幅が変更されると、2 秒間アニメーション化します。」

transition: all 0.5s は、「何かが変更されるとき、それに 0.5 秒を費やします。」という意味です。

それで、ホバーされたときにボタンの角を丸くしたい場合は?

/* Initial state: border-radius is 0. * When border-radius changes, it'll take 0.3s * instead of happening immediately */button {	border-radius: 0;	transition: border-radius 0.3s;	/* any other styles you need ... */}button:hover {	border-radius: 20px;}

ボタンは次のとおりです:

1 .demo-button { transition: border-radius 0.3s; 2 border: 1px solid dodgerblue; background-color: #fff; 3 border-radius: 0; padding: 1em; color: dodgerblue; } 4 .demo-button:hover { border-radius: 20px; }