css - 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);
}

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

密码笔

标签： cssanimation