添加一个 .box:hover，去设置一下页面上的这个元素的悬停的样式 ... 用一个 border-radius 属性，它的值设置成 50% ...

鼠标放到这个正方形的上面，元素的属性的值会发生变化，最开始它是个正方形，鼠标放上去以后它现在会立即变成一个圆形 .. 因为元素的 border-radius 这个属性的值从零变成了 50% ..

属性的值发生了变化，我们可以使用 CSS 的 transition 给它添加点动画效果 .. 让这个过渡更平滑一些 ..

在这个元素的初始状态的下面 ... 用一个 transition-property . 用它可以设置一下要过渡的属性是谁 .. 我这里就是 border-radius 这个 css 属性 ..

然后再用一个 transition-duration ... 设置一下完成这个过渡需要多久 ... 单位可以是秒也可以是毫秒 .. 比如 .6s ，就是 0.6 秒 ..

再把鼠标放到这个小方块的上面 ... 现在元素的 border-radius 属性的值有变化的时候，就会使用一个平滑的过渡效果 ...

如果你想延迟这个动画效果，可以再用一个 transition-delay .. 它的值设置成 1s ..

再试一下 .. 鼠标放上去 .. 过了 1 秒钟以后才会触发这个过渡动画 ...

这个动画效果也可以去定制一下 .. 添加一个 transition-timing-function 属性 .. 它的默认的值是 ease ..

它还可以是 ease-in，ease-in-out，ease-out，还有 linear 这些值，先看一下 linear ... 因为它跟 ease 的区别比较大 ..

你会发现用了 linear 以后，这个过渡效果是均速的 ...

另外我们也可以自己定制这个动画效果 ... 用的是 cubic-bezier .. 它有四个值 ... 网上有很多小工具可以帮你定制想要的动画 ... 我们先手工设置一个 ... 1, 0, 0, 1 ...

现在你看到的这个过渡动画就是我们用 cubic-bezier 自己定制的 ...

这四个属性还有一个简单的形式 ... 可以直接用一个 transition 属性 .. 它的四个值分别是过滤的属性，我这里是 border-radius .. 持续的时间 ... .6s .. 然后是 timing-function，比如 ease-in， ease out，或者也可以是用 cubic-bezier 定制的 ...

最后一个值是 dealy ，延迟的时间 ...

再注释掉使用具体的属性设置的这个过渡效果 .. 你会发现，跟之前的效果是一样的 ...