CSS动画滑入和滑出

Question

我有一个绿色面板，可以从左向右滑动（可以正常工作）：

.panel#search {
  background-color: #1abc9c;
  transition: all 800ms cubic-bezier(0.19, 1, 0.56, 1);
  transform: translate3d(-100%, 0, 0);
}

.panel#search:target {
  transform: translate3d(0, 0, 0);
}

显示该绿色面板时，出现搜索链接。单击它会显示一个蓝色面板，从右向左滑动，就像这样：

.panel#results {
  background-color: #84ceeb;
  transition: all 800ms cubic-bezier(0.19, 1, 0.56, 1);
  transform: translate3d(100%, 0, 0);
}

.panel#results:target {
  transform: translate3d(0, 0, 0);
}

但是，在绿色面板上单击搜索时，蓝色面板没有滑动效果。它会立即显示蓝色面板，而不是从右向左滑动。

Codepen