只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇

简介: 只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇

前言

实现动画效果是前端提升用户体验的重要一环,从CSS动画到JS动画帧,每种技术都有其独特的优势和适用场景,本篇文章将与大家分享浏览器CSS的原生动画技术

在css中有两种动画形式,分别是Transition(过渡,元素从一种样式逐渐变成另一种样式)和Animation(动画,元素通过几个步骤定义样式改变)

Transition

transition属性用来定义元素何时启动整个过渡的开始、结束状态,以及每个过渡属性的值变化规则。它是一种简单、易于使用的CSS技术,可以产生绚丽的过渡效果,从而增加网页的交互性和用户吸引力

属性

transition-property:transition控制哪个属性,默认all,可以是多个属性,用逗号分隔。

transition-duration:transition的持续时间,默认0,单位为秒(s)或者毫秒(ms)。

transition-timing-function:设置transition的速度曲线(后文的贝塞尔曲线),默认ease渐进。可以是linear线性,ease渐进,ease-in加速,ease-out减速等。

transition-delay:控制transition何时开始(延迟),默认0,单位为秒(s)或者毫秒(ms)。

下面是一个基本写法,过渡时间1秒,延迟1秒,针对left属性生效,过渡速度曲线是ease-out

transition-duration: 1s;
transition-property: left;
transition-timing-function: ease-out;
transition-delay: 1s;

简写

上面的多个子属性可以通过下面的简写达到相同的效果。

transition: transition-property transition-duration transition-timing-function transition-delay;

tips:参数顺序无影响,参数有两个时间,先写的是duration,后写的是delay

来看看下面这个例子,我们通过hover触发过渡动画,针对left属性生效,过渡时间0.5秒,延迟一秒执行,动画效果是匀速,也就是hover后整个过程是1.5秒

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        position: relative;
      }
      .box {
        width: 200px;
        height: 200px;
        left: 0;
        position: absolute;
        background: lightblue;
      }
      .box:hover {
        left: 100px;
        transition: left 0.5s linear 1s;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

效果如下

进阶用法

  • transition-property可以设置all适用于全部属性,当存在多个属性需要设置成不同的过渡效果时可以使用逗号隔开,比如
.box:hover {
  left: 100px;
  width: 400px;
  transition: left 1s linear 1s, width 1s ease-in-out;
}

  • 如果想让触发器失效时(取消hover操作)的动画不那么生硬,可以考虑在原有样式中加上同样的过渡,我们使用之前的CSS变量将过渡动画使用变量定义一下,方便复用
html,
body {
  width: 100%;
  height: 100%;
  position: relative;
  --box-transition: left 1s linear 1s, width 1s ease-in-out;
}
.box {
  width: 200px;
  height: 200px;
  left: 0;
  position: absolute;
  background: lightblue;
  transition: var(--box-transition);
}
.box:hover {
  left: 100px;
  width: 400px;
  transition: var(--box-transition);
}

  • transition-timing-function有以下常用方法:
  1. linear:匀速线性
  2. ease:规定过渡效果,先缓慢地开始,然后加速,然后缓慢地结束
  3. ease-in:规定缓慢开始的过渡效果
  4. ease-out:规定缓慢结束的过渡效果
  5. ease-in-out:规定开始和结束较慢的过渡效果
  6. steps(int, start | end):指定带有两个参数的步进函数。第一个参数指定函数中的间隔数。第二个参数指的是从每步的开始还是结束计算,可以参考下面这张图

    效果可以参考下面的gif:
    transition-timing-function: steps(3, end)

    transition-timing-function: steps(3, start)
  7. step-start:相当于steps(1, start)
  8. step-end:相当于steps(1, end)
  9. cubic-bezier():贝塞尔曲线函数,可以参考这个网站进行在线调试

Animations

说完了CSS的过渡,我们来看看animations动画,它通过设置animation(动画)属性与@keyframes(关键帧)进行使用。

语法如下

@keyframes关键帧

关键帧有几种定义方式,用来声明不同阶段的样式属性

from&to

from属性可以设置起始样式,to则是设置结束样式,from和to都可以单独设置。我们把整个动画拆分成多个帧,第一帧的效果就是from,最后一帧就是to。

@keyframes animationname {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}
@keyframes animationname1 {
  from {
    /* 开始样式 */
  }
}
@keyframes animationname2 {
  to {
    /* 结束样式 */
  }
}

百分比

百分百的写法可以理解为将一个动画分为多个关键点,比如整个动画总耗时是4秒,则每秒对应的样式可以使用下面的语句

@keyframes myAnimation {
  0% {
    left: 10px;
  }
  25% {
    left: 40px;
  }
  50% {
    left: 80px;
  }
  100% {
    left: 100px;
  }
}

animation动画

上面我们讲述了关键帧的定义,如果需要定义多段动画或者无规律的动画,关键帧就显得很重要。那么定义完动画后我们应该如何使用呢?这就离不开接下来的animation动画属性了

属性

和transition一样animation也有许多可配置的属性

  1. animation-name:使用@keyframes定义的动画名。
  2. animation-duration:动画的持续的时间。属性同transition-duration
  3. animation-timing-function:动画的速度曲线。属性同transition-timing-function
  4. animation-delay:指定动画延迟的时间。属性同transition-delay
  5. animation-iteration-count:指定动画循环的次数。设置infinite表示无限循环,也可以设置正整数,表示次数
  6. animation-direction:指定动画运动方向。理解为往复运动
  7. animation-fill-mode:指定动画结束时的状态。
  8. animation-play-state:指定是否播放或暂停动画。paused是暂停,running是运行

简写

animation可以将上面的配置简写在一个样式中

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state

tips:和过渡一样,参数顺序不固定,其中有两个时间,先写的是duration,后写的是delay

下面是一个例子,其中配置的含义是使用myAnimation动画,延迟一秒执行匀速动画,动画的过程是2秒,往复执行3次,完成后不重置位置

@keyframes myAnimation {
  from {
    left: 0px;
  }
  to {
    left: 100px;
  }
}
.box-move {
  animation: myAnimation 2s linear 1s 3 alternate forwards running;
}

效果如下

进阶用法

由于2、3、4属性与transition一样,所以介绍一下上面的6、7、8属性

  • animation-direction用于控制动画的方向,如果一段动画的过程是A->B,默认是normal,表示A->B;设置为reverse表示B->A;
    当animation-iteration-count设置为infinite时:
    alternate表示A->B->A->B......,效果如下:

    alternate-reverse表示B->A->B->A......,效果如下:
  • animation-fill-mode是指设置第一帧的前一帧或最后一帧的后一帧的状态。
    当设置为forwards表示动画最后一帧保持现状不会重置到第一帧;
    设置为backwards时,动画的前一帧(第-1帧)与第一帧保持一样;
    设置为both时表示同时具备forwards和backwards的效果
  • animation-play-state:指定是否播放或暂停动画。paused是暂停,running是运行。
    常用的操作是通过js控制动画暂停和播放
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        position: relative;
        transition: left 3s linear;
      }
      .box {
        width: 200px;
        height: 200px;
        top: 50px;
        position: absolute;
        background: lightblue;
      }
      @keyframes myAnimation {
        from {
          left: 0px;
        }
        to {
          left: 100px;
        }
      }
      .box-move {
        animation: myAnimation 1s infinite forwards alternate;
      }
    </style>
  </head>
  <body>
    <div class="box box-move"></div>
    <button id="play_pause">暂停/继续</button>
    <script>
      const btn = document.querySelector("#play_pause");
      const box = document.querySelector(".box");
      btn.addEventListener("click", () => {
        const { style } = box;
        if (style.animationPlayState === "paused") {
          return (style.animationPlayState = "running");
        }
        style.animationPlayState = "paused";
      });
    </script>
  </body>
</html>
  • 效果如下

贝塞尔曲线(Bezier Curve)

贝塞尔曲线与前端动画能碰撞出怎样的火花呢?可以说这二者关系非常紧密,前端大部分动画都是采用匀速动画,效果比较生硬。如果想让动画看起来更平滑,更符合人眼观察,就需要用到贝塞尔曲线

贝塞尔曲线是由一系列控制点所组成的曲线。它的形状由这些控制点所确定,而不是像多项式曲线一样由特定的数学公式来描述。

一个贝塞尔曲线通常由三个或更多的控制点组成。当控制点的数量为三个时,它被称为二次贝塞尔曲线;为四个时,它被称为三次贝塞尔曲线;以此类推。

使用控制点来定义贝塞尔曲线的好处是,可以直接控制曲线的形状,同时可以轻松地修改这些点,而不需要重新计算整个曲线。

我们可以在这个网站对贝塞尔曲线(三次贝塞尔曲线)进行模拟操作

总结

本文从CSS的两大动画属性与大家分享了使用transition达到样式变化过渡的效果,以及animation动画效果,其中transition适合单一的样式属性过渡,其优势在于兼容性好、性能高,能够平滑地过渡样式的变化;而animations使用@keyframes和animation属性实现复杂的动画效果,具有更高的灵活性,可以定义任意的关键帧和时间线,并实现任意属性的变化动画。在实际开发中我们可以根据项目需求选择合适的技术,让它们发挥最大的作用

以上就是文章全部内容了,希望能够对你有帮助,相关问题可以评论或者私信。最后如果觉得文章不错的话,还望三连支持一下博主,感谢!

相关文章
|
1月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
30天前
|
前端开发 容器
CSS 居中技术完全指南:从基础到高级应用
本文详细介绍了 CSS 中常用的居中方法,涵盖水平居中、垂直居中及同时实现两者的方法。
46 12
|
1月前
|
前端开发 开发者 UED
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
53 1
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
68 6
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
88 5
|
4月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
316 14
|
4月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
84 0
|
4月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
102 6
|
4月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
102 1

热门文章

最新文章

  • 1
    css3 svg制作404页面动画效果HTML源码
  • 2
    【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
  • 3
    CSS 过渡和动画
  • 4
    Css实现文本超出长度隐藏并用三个点结尾
  • 5
    如何使用CSS过渡实现页面元素的淡入淡出效果?
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 7
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    详解智能编码在前端研发的创新应用
  • 10
    巧用通义灵码,提升前端研发效率
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75