"Whenever this property changes, apply that change slowly."
The property transition: width 2s says “when the width changes, animate it over the course of 2 seconds.”
transition: all 0.5s says “when anything changes, spend 0.5s doing it.”
So if you want to round the corners of a button when it’s hovered?
立即学习“前端免费学习笔记（深入）”；
/* 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;}Here’s the button:
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; }
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
620
收藏
