使用css写一个从右侧划出的抽屉动画

好的，以下是一个从右侧划出的抽屉动画的CSS代码：

/* 隐藏抽屉 */
.drawer {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background-color: #fff;
  z-index: 999;
  transition: right 0.3s ease-in-out;
}

/* 显示抽屉 */
.drawer.open {
  right: 0;
}

在HTML中需要为抽屉元素添加一个`drawer`类，并且通过JavaScript来为其添加或移除`open`类来控制显示和隐藏。例如：

<div class="drawer">
  <!-- 抽屉内容 -->
</div>

<button onclick="document.querySelector('.drawer').classList.add('open')">打开抽屉</button>
<button onclick="document.querySelector('.drawer').classList.remove('open')">关闭抽屉</button>

当点击打开按钮时，抽屉会从右侧滑出显示出来，点击关闭按钮时，抽屉会向右侧滑动并隐藏。