当前位置：首页 > ds >正文

CSS元素动画篇：基于页面位置的变换动画

ds 2025/5/4 22:50:03

基于页面位置的变换动画

前言
基于页面位置的变换动画
- 从上往下移动
- - 效果预览
  - 代码实现
- 从下往上移动
- - 效果预览
  - 代码实现
- 从左往右移动
- - 效果预览
  - 代码实现
- 从右往左移动
- - 效果预览
  - 代码实现
结语

前言

CSS元素动画一般分为两种：一种是元素基于当前位置的变换动画，通过不明显的位移、缩放等方式，实现动画效果，如弹跳、闪烁、抖动等；另一种是元素基于页面位置的变换动画，通过位移、旋转等方式，实现动画效果，如飞入/飞出等。
在之前的文章中，介绍了基于当前位置的变换动画，本篇文章将介绍基于页面位置的变换动画。

基于页面位置的变换动画

基于页面位置的变换动画：主要是通过元素从页面不同的位置移动到指定位置，并添加旋转、缩放等方式实现动画效果，其效果和基于当前位置的变换动画大同小异，本文主要介绍从上、下、左、右四个不同的方式实现基于页面位置的变换动画。

从上往下移动

从上往下移动：通过translateY设置动画，初始帧设为一个较大的负值，移动到当前位置，其效果图如下所示：

效果预览

从上往下移动

代码实现

<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设置动画，初始帧设为一个较大的正值，移动到当前位置，其效果图如下所示：

效果预览

从下往上移动

代码实现

<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设置动画，初始帧设为一个较大的负值，移动到当前位置，其效果图如下所示：

效果预览

从左往右移动

代码实现

<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设置动画，初始帧设为一个较大的正值，移动到当前位置，其效果图如下所示：

效果预览

从右往左移动

代码实现

<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>