基于页面位置的变换动画
前言
CSS元素动画一般分为两种:一种是元素基于当前位置的变换动画,通过不明显的位移、缩放等方式,实现动画效果,如弹跳、闪烁、抖动等;另一种是元素基于页面位置的变换动画,通过位移、旋转等方式,实现动画效果,如飞入/飞出等。
在之前的文章中,介绍了 基于当前位置的变换动画 ,本篇文章将介绍基于页面位置的变换动画。
基于页面位置的变换动画
基于页面位置的变换动画:主要是通过元素从页面不同的位置移动到指定位置,并添加旋转、缩放等方式实现动画效果,其效果和基于当前位置的变换动画大同小异,本文主要介绍从上、下、左、右四个不同的方式实现基于页面位置的变换动画。
从上往下移动
从上往下移动:通过translateY设置动画,初始帧设为一个较大的负值,移动到当前位置,其效果图如下所示:
效果预览

代码实现
html
<style>
@keyframes topToBottom {
0% {
opacity: 0;
transform: translateY(-1200px);
}
80% {
opacity: 0.7;
transform: translateY(0px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
.top-to-down {
padding: 100px 200px;
display: inline-block;
height: 100px;
font-size: 100px;
animation: topToBottom 1.5s ease-in-out 1;
}
</style>
<body>
<span class="top-to-down">从上往下移动</span>
</body>
从下往上移动
从下往上移动:通过translateY设置动画,初始帧设为一个较大的正值,移动到当前位置,其效果图如下所示:
效果预览

代码实现
html
<style>
@keyframes downToTop {
0% {
opacity: 0;
transform: translateY(1200px);
}
80% {
opacity: 0.7;
transform: translateY(0px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
.down-to-top {
padding: 100px 200px;
display: inline-block;
height: 100px;
font-size: 100px;
animation: downToTop 1.5s ease-in-out 1;
}
</style>
<body>
<span class="down-to-top">从下往上移动</span>
</body>
从左往右移动
从左往右移动:通过translateX设置动画,初始帧设为一个较大的负值,移动到当前位置,其效果图如下所示:
效果预览

代码实现
html
<style>
@keyframes leftToRight {
0% {
opacity: 0;
transform: translateX(-1200px);
}
80% {
opacity: 0.7;
transform: translateX(0px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
.left-to-right {
padding: 100px 200px;
display: inline-block;
height: 100px;
font-size: 100px;
animation: leftToRight 1.5s ease-in-out 1;
}
</style>
<body>
<span class="left-to-right">从左往右移动</span>
</body>
从右往左移动
从右往左移动:通过translateX设置动画,初始帧设为一个较大的正值,移动到当前位置,其效果图如下所示:
效果预览

代码实现
html
<style>
@keyframes rightToLeft {
0% {
opacity: 0;
transform: translateX(1200px);
}
80% {
opacity: 0.7;
transform: translateX(0px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
.right-to-left {
padding: 100px 200px;
display: inline-block;
height: 100px;
font-size: 100px;
animation: rightToLeft 2s ease-in-out 1;
}
</style>
<body>
<span class="right-to-left">从右往左移动</span>
</body>
结语
本文主要简单介绍了几种常见的基于页面位置的元素动画,你还知道哪些基于页面位置的元素动画?欢迎在评论区留言分享!