元素从一个状态变化到另一个状态的时候， 我们可以给它们添加点过渡的效果 .. 先找到 search-form .. 添加一个 transition 属性，表示过渡 .. all 表示所有的可以应用过渡效果的属性 .. 后面的 .5s 表示过渡的时间是半秒 ..

transition: all .5s;

这个 transition 属性应该用在元素的初始状态上 ..

下面这块样式，是元素的另一个状态 .. 在它的初始状态上，它的 Y 轴的移动距离是 -120 像素 .. 点击了搜索小图标，在 content 元素上添加了 searching 类以后，这个 search-form 元素会到另一个状态，这里它在 Y 轴的移动距离是 -50 像素 ..

元素在这两个状态之间切换的时候，就应用一个过渡效果 ..

我们可以在初始状态上再用一个 opactiy ，把元素的不透明度设置成 0，也就是让它完全透明 ..

在结束的状态上，再用一下 opacity ，值可以是 1，表示完全不透明 .. 从透明到不透明也会有个过渡效果 .. 因为我们在元素上应用的 transition 状态里面，用了 all ，表示过渡所有可以过渡的属性， 你也可以设置允许过渡的属性 ..

在 header 上面，也可以用一下这个 transition ..

transition: all .5s;

再找到 menu .. 也用一下 transition .. all .4s ..

再去设置一下它们在搜索状态的样式 .. 可以把 opacity 设置成 0

到浏览器上再去试一下 ..

点一下搜索小图标 .. 隐藏还有显示元素的时候，都会有一个过渡的动画效果 ...