基础 CSS 画布外过渡

CSS 过渡是指在 HTML 元素从一种样式变化到另一种样式时产生的平滑动画效果。在 CSS3 中，添加了许多新的过渡属性，其中包括 transform、opacity、color 等。

但是，当你想要在画布外过渡时，CSS 过渡却不能够实现这个效果。不用担心，我们可以使用一些简单的技巧来实现画布外过渡效果。

方法

我们可以先将元素放在画布外，然后通过过渡动画将元素移到画布内。这个方法主要分为两步：

1. 在 CSS 中定义画布外的位置
2. 添加一些过渡动画来将元素移动到画布内

定义画布外的位置

要定义画布外的位置，我们可以使用 transform: translate 属性，将元素从画布外移动到画布内。

下面是一个示例代码片段，展示如何将元素移出画布：

.element {
  transform: translateX(-100%);
}

上面的代码将元素移动到了视口的左侧。你可以改变属性值来移动元素至你想要的位置。

添加过渡动画

添加过渡动画是为了让元素平滑地从画布外移动到画布内。我们可以使用 CSS3 中的 transition 属性来定义这个过渡动画。

下面是一个示例代码片段，展示如何使用 transition 属性来实现从画布外移动到画布内的过渡动画：

.element {
  transform: translateX(-100%);
  transition: transform 0.5s ease-out;
}

.element--in-view {
  transform: none;
}

上面的代码将元素定义在画布外，并且添加了一个过渡动画，当元素类名变为 .element--in-view 时，元素就会平滑地移动到画布内。

总结

CSS 过渡是在 HTML 元素变化时产生平滑动画的一种方式，但是当你想实现画布外过渡时，就需要一些额外的技巧。使用 transform 和 transition 属性，你可以将元素平滑地从画布外移动到画布内。