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

基于页面位置的变换动画

前言

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>

结语

本文主要简单介绍了几种常见的基于页面位置的元素动画,你还知道哪些基于页面位置的元素动画?欢迎在评论区留言分享!

相关推荐
黑匣子~31 分钟前
使用 electron-builder 打包与发布 Electron 应用
前端·javascript·electron
前端小巷子1 小时前
JavaScript 垃圾回收与内存泄漏
开发语言·前端·javascript·面试
啊啊啊~~1 小时前
js拖拽事件实现简单选课功能
javascript·css·css3
前端虫1 小时前
(初级)前端初学者入门指南:HTML5与CSS3核心知识详解
前端·css3·html5
等什么君!1 小时前
学习vue3:跨组件通信(provide+inject)
前端·vue.js·学习
第7个前端2 小时前
vue3 + vite 使用tailwindcss
前端·css·tailwind
杨超越luckly2 小时前
HTML应用指南:利用POST请求获取全国中通快递服务网点位置信息
前端·信息可视化·数据分析·html·php
Allen Bright2 小时前
【HTML-4】HTML段落标签:构建内容结构的基础
前端·html
老天文学家了3 小时前
HashMap的基础用法(java)
java·前端·javascript
speedoooo3 小时前
App Builder技术选型指南:从AI编程到小程序容器,外卖App开发实战
前端·小程序·前端框架·ai编程·web app