CSS左侧滑出动画是一种常见的Web页面过渡效果，可以为用户提供更加流畅的用户体验。下面介绍如何使用CSS制作一个简单的左侧滑出动画。

.slideleft {
position: fixed;
top: 0;
left: -300px;
width: 300px;
height: 100%;
background-color: #fff;
transition: all 0.3s ease;
}
.slideleft.active {
left: 0;
}

首先，我们需要定义一个CSS选择器，命名为slideleft。使用position: fixed将元素固定在页面的左侧，并设置left属性为-300px，使元素完全隐藏在页面之外。接着，我们给它设定一个宽度和高度，并设置背景颜色为白色。最后，我们给这个元素添加CSS过渡效果，设置过渡持续时间为0.3秒，并采用ease缓动函数，使过渡更加平滑。

接下来，我们需要给.slideleft添加另一个CSS样式，命名为active。当我们需要让元素滑入页面时，就切换到这个状态，设置left为0，让它从左侧滑入页面。

var element = document.querySelector('.slideleft');
element.classList.add('active');

最后，我们通过JavaScript来激活这个动画效果。使用querySelect获取.slideleft元素，然后调用classList.add方法来将.active类名添加到.slideleft元素身上，就能够让元素以动画的形式滑入页面了。