- 综合排序
- 最热优先
- 最新优先
- 来自专栏小康的自留地
前端课程——动画
动画 什么是动画 CSS3新增animation 属性使得仅通过CSS的样式属性实现动画效果成为可能。 实现动画包括两个部分： 用于定义动画的样式规则 用于设置动画开始、结束以及中间点样式的关键帧相对于传统使用JavaScript实现的动画方式，CSS3 新增的animation属性具有以下三个优点: 动画运行效果良好，可以在低性能的系统运行。性能以及流畅程度都优于JavaScript实现画效果。 允许浏览器优化动画的性能和效果，让浏览器控制动画序列。 keyframe-block-list 用于设置动画执行过程中的关键帧。 实现动画 ? 动画执行完成后回归原始状态且不需要触发条件。 normal 默认值 每个循环内动画向前循环 即 动画循环结束后回到起点重新开始 ? alternate 动画交替反向运行，反向运动时，动画起步后退，同时，带时间功能的函数也反向。
1.2K10发布于 2020-04-09 - 来自专栏grain先森
前端动画大乱炖
作为一只前端狗，我们的使命就是在满足产品需求、实现交互设计的基础上，将最好的体验呈现给用户爸爸们。在保证性能的同时，我们通常会给页面加一些动态效果，以增强页面的表现力并提升页面的交互体验。 故将前端实现动效的几种常用方式整理成此篇小结，以求温故而知新，如有不当还望多多指正。 ? 童年.png 动画即童年 动画是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。-- 维基百科 以上是维基百科上给出的动画的定义。 实现方式 通常我们在前端实现动画效果的几种主要实现方式如下： JavaScript：通过定时器（setTimeout 和 setIterval）来间隔来改变元素样式，或者使用requestAnimationFrame 设置这个API的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。
1.8K20发布于 2019-03-29 - 来自专栏clz
前端动画实现笔记
前端动画实现笔记 参加字节跳动的青训营时个人写的笔记。这部分是蒋翔老师讲的课。 动画：动画是通过快速连续排列彼此差异极小的连续图像来制造运动错觉和变化错觉的过程。 快速 连续排列 彼此差异极小 制造错觉 动画都需要定义两个基本状态，即起始状态和结束状态，然后填补两者之间的空白，让动画连贯。 空白的补全方法有两种： 补间动画：传统动画。 主画师绘制关键帧，补间动画师补充关键帧。(而在前端中，补间动画师就由浏览器来当，如 keyframe 和 transition) 逐帧动画：每一帧都由主画师绘制。 (如由 steps 实现的精灵动画) 常见的前端动画技术：Sprite 动画、CSS 动画、JS 动画、SVG 动画、WebGL 动画 1. CSS 动画 CSS animation 是常见的 CSS 动画实现方式 animation-name：应用的一系列动画。
2K40编辑于 2023-01-02 - 来自专栏vae
前端动画效果案例
1，CSS图片响应悬停效果 下载地址：链接：https://pan.baidu.com/s/1sxA2Xz8CcoqBiHdsnsNQpg 提取码：2hyq 2，纯scc轮播动画 下载地址：https:
2.2K20编辑于 2022-09-22 - 来自专栏TagBug
前端动画实现 - 笔记
动画的基本原理：什么是动画、动画的历史、计算机动画原理 前端动画的分类：CSS 动画、SVG 动画、JS 动画、如何选择 前端动画如何实现（主要是 JS）：JS 动画的函数封装、简单动画、复杂动画 相关实践：动画资源、工作实践、动画的优化 # 前端动画实现 - 笔记 # 动画的基本原理 # 什么是动画 动画是通过快速连续排列彼此差异极小的连续图像来制造运动错觉和变化错觉的过程。 快速、连续排列、彼此差异极小、制造错觉 # 动画的历史 如今前端动画技术已经普及 常见的前端动画技术 Sprite 动画、CSS 动画、JS 动画、SVG 动画和 WebGL 动画 按应用分类 (如 CSS 的 steps 实现精灵动画) # 前端动画分类 # CSS 动画 CSS animation 是常见的 CSS 动画实现方式： CSS animation 属性是 animation-name # 前端动画实现 # JS 动画函数封装 先来一个基础的 animate 函数： /** * 入参说明： * draw 动画绘制函数（例如：() => { ctx.draw ()... }） *
3.5K30编辑于 2023-03-17 - 来自专栏云前端
前端动画实现总结
前端动画实现的几种方式 javascript直接实现 SVG（可伸缩矢量图形） CSS3 transition CSS3 animation Canvas动画 requestAnimationFrame 一般认为人眼能辨识的流畅动画为每秒60帧，这里16ms比(1000ms/60)帧略小一些，但是一般可仍为该动画是流畅的。在很多移动端动画性能优化时，一般使用16ms来进行节流处理连续触发的浏览器事件。 三.CSS3 transition transition是过度动画。但是transition并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是马上改变。 Canvas动画 canvas作为H5新增元素，是借助Web API来实现动画的。 <! 总结 复杂的动画是通过一个个简单的动画组合实现的。
1.7K10发布于 2020-06-16 - 来自专栏grain先森
前端-动画大乱炖
作者：桂圆_noble http://www.jianshu.com/p/280e0ef90b96 作为一只前端开发者，我们的使命就是在满足产品需求、实现交互设计的基础上，将最好的体验呈现给用户爸爸们 故将前端实现动效的几种常用方式整理成此篇小结，以求温故而知新。 ? 动画即童年 动画是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。 实现方式 通常我们在前端实现动画效果的几种主要实现方式如下： JavaScript：通过定时器（setTimeout 和 setIterval）来间隔来改变元素样式，或者使用requestAnimationFrame 设置这个API的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。 代码中使用这个API，就是告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘。
1.4K20发布于 2019-03-29 - 来自专栏Web 技术
【前端动画】实现动画的6种方式
引言 动画基本上分类两类：补间动画和帧动画。 补间动画：补齐中间的动画。由浏览器帮助补齐中间的状态，开发者只需要定义开始和结束的状态。 帧动画：除了开始与结束状态，开发者还可以定义中间关键帧的状态，可以制作复杂的动画。 （❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步~） Tip：为什么是16ms 上面例子中，我们设置的setInterval时间间隔是16ms。 比较 Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画。 总结 复杂的动画是通过一个个简单的动画组合实现的。
1.2K10编辑于 2023-10-07 - 来自专栏IMWeb前端团队
前端迪士尼动画守则上
有人就好奇了，迪士尼的动画守则跟我们前端有啥关系吖？ 当然有关系！ 我们知道在前端开发中，我们少不了使用css3 transiton(过渡)和animation(动画)来制作页面生动的交互效果。 然而生动形象的动画往往建立在正确的动画规则基础下。 ---- 看到这些原则的时候，我就在思考，是否在前端开发动画中，能够运用到这些原则呢？故自己根据这些原则动手试了下相应的动画效果。 当一个软性物体和地面撞击时，会有压扁和拉伸的状态，其真实的反映了现实中的物理碰撞情况，通过挤压和拉伸，极大的加强了物体碰撞时的动画效果，十分生动抢眼。 如同下面这个css动画，小球的弹跳运用了守则一，显得更为生动 ? 如下面的css动画 ? 查看源代码
95920发布于 2019-12-04 - 来自专栏IMWeb前端团队
前端迪士尼动画守则上
阅读此文章前，建议大家先观看一下这个迪斯尼的小视频, 本文的灵感来自于该视频的哈 该视频是描述迪士尼这么多年积累的动画开发经验和规则。 有人就好奇了，迪士尼的动画守则跟我们前端有啥关系吖？ 我们知道在前端开发中，我们少不了使用css3 transiton(过渡)和animation(动画)来制作页面生动的交互效果。 然而生动形象的动画往往建立在正确的动画规则基础下。 看到这些原则的时候，我就在思考，是否在前端开发动画中，能够运用到这些原则呢？故自己根据这些原则动手试了下相应的动画效果。 如同下面这个css动画，小球的弹跳运用了守则一，显得更为生动 ? 如下面的css动画 ? 查看源代码 更多精彩，静等下一期哈！！！！！！！！！！！！！！！！！！！！！！！！！！！！
1.3K60发布于 2017-12-29 - 来自专栏cwl_Java
前端基础-jQuery动画效果
第9章 jQuery动画效果 jQuery提供了三组基本动画，这些动画都是标准的、有规律的效果，jQuery还提供了自定义动画的功能。 演示动画效果 [08-演示jQuery动画（animate）.html] 9.1 三组基本动画 显示(show)与隐藏(hide)与切换(toggle)是一组动画： 滑入(slideUp)与滑出(slideDown // 1.如果不传，就没有动画效果。 ;同理 9.2 自定义动画 animate: 自定义动画 $(selector).animate({params},[speed],[easing],[callback]); // {params}：要执行动画的 （可选） 9.3 动画队列与停止动画 在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：火车进站）。
4.5K20发布于 2020-03-26 - 来自专栏零域Blog
前端弹性动画与 framer-motion 动画库初探
content {:toc} 前端动画的开发一直是我所热衷探索与研究的内容，本文将描述什么是拟真的动画效果，目前所流行的 React 动画库，以及一些基于 framer-motion 动画库的 demos 动画效果的真实体验 `timing-function` 的不足 说到拟真的的动画体验，本质是动画中的过渡动画带来的体感。 通常情况开发一个前端动画，会使用 CSS transition 来实现，动画中的变量值（如 div 的位移或角度等）与时间的关系是三次贝塞尔曲线（cubic-bezier），即 `timing-function 弹簧-阻尼系统中的运动 在很多 native 动画中，特别是 iOS 的系统动画中，可以感受到“拉动越小，回弹越小；拉动越大，回弹越大”的感受，这便是弹簧动画的效果 ! 事实上，framer motion 作为动画库，提供了一些极其简洁的 api 帮助我们创建复杂的动效，这些 api 帮助然我们抽象出动画背后的复杂性，让创建动画变得简单。
4.5K30编辑于 2022-03-28 - 来自专栏算法与编程之美
前端|利用CSS制作动画效果
问题分析 需要制作出此效果，我们首先需要对css动画有一定的了解，在此基础上，我们便能利用css代码写出此效果，那么关于css动画的代码有哪些呢？下面，我就为大家介绍一些关于css动画的代码。 结语 本文介绍了如何运用css动画制作一个立体正方体，当我们阅读这篇文章后，我们还可用css动画效果制作更多更好看的图像，如果需要，可进行多次练习、摸索，也可百度找一些模板观察。
2.2K40发布于 2019-07-17 - 来自专栏生如夏花绚烂
前端序列帧动画实现
原理 1.UI 提供精灵图/雪碧图（就是将序列帧排在一张图片上的图） 2.通过代码不断改变图片的位置，从而形成动画效果 代码实现 <style> .logo_gif { width: 300px; // 单个动画帧尺寸 height: 300px; cursor: pointer; background-image background-position-y: 0; animation: mouse-in 1.5s; animation-timing-function:steps(26); // 动画帧数量 animation-iteration-count:infinite // 动画循环播放 } @keyframes mouse-in{ background-position-y的值不能随便取，必须根据元素的大小乘以动画帧数量得出 如本例元素大小为300，虽然雪碧图的大小是 400 x 10400 我们不能写成 @keyframes
1.5K20编辑于 2022-09-08 - 来自专栏grain先森
前端-10款web动画插件
今天给大家带来了十款web前端动画插件，大家收藏了记得给个小心心哦 1.基于jQuery的瀑布流图片筛选插件 瀑布流的展现方式在目前的网页中用得越来越广泛，特别是图片和首页文章的动态加载。 这次我们分享的这款插件是基于Layui的，layui 是一款采用自身模块规范编写的前端UI框架，这款表格插件可以允许你非常方便的添加、删除表格行数据，并且通过服务器接口进行保存。 你只需要定制前端的数据列和后端的保存逻辑即可，数据交互均采用JSON格式。 ? 因为用上了一些CSS3的动画属性，所以这个超链接图片弹出动画有很多种，你也可以自己尝试定义一些新的动画效果。 ? 加载动画就是通过简单的这方形叠加形成的动画。
7.3K50发布于 2019-03-29 - 来自专栏零域Blog
提升用户体验的前端动画
与其他开发人员不同的是，前端开发都是在端上游走舞者，直接与用户交流沟通，这就需要前端开发具有更敏锐的交互体验思考，或者能更精准地理解设计师们意图，将最佳的用户体验带给用户。 为了给用户带来更好的体验，我在这个基础上又增加了一些手势和过渡的动画效果，如下图。 下面简单的拆分一下动画细节： 页面载入，卡片向上滑入 增加 pan 的手势，卡片跟随手指滑动 随着手指滑动，增加遮罩透明度与卡片阴影变化 增加向上和向下的边界条件的处理 动画与手势的运用 这些动画利用 注意仔细观察，随着卡片的上滑，为了凸显出弹层是悬浮在底层的视觉效果，其阴影的 blur,spread,color 也跟随变重 下面再加入 pan 手势，即拖拽或平移，这里我们使用这个手势实现弹层的拖拽和相关动画 而动画只是交互体验中的一小部分。 我认为前端的本质，就是将最优质的用户体验带给用户，我也在为之不断努力，欢迎交流。
1.2K20编辑于 2022-03-29 - 来自专栏夏天的前端笔记
前端面试：css动画属性
面试官问你用过哪些css动画属性，能具体说说吗，现在再来回顾一下知识点： css动画属性 具体的animation属性 1.animation-timing-function属性：规定动画的速度曲线。 2.animation-iteration-count属性：定义动画的播放次数。 3.animation-play-state属性：规定动画正在运行还是暂停。 4.animation-fill-mode属性：规定动画在播放之前或之后，其动画效果是否可见。 例子：实现一个简单的动画效果： //引用该动画名 button{ animation: ani 5s ease 2s infinite ; } //@keyframes 定义一个动画名 @keyframes
19710编辑于 2024-01-18 - 来自专栏AIGC
【前端】CSS3动画详解
博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 ✍CSS3 动画详解与应用 1 帧动画概述 在 CSS3 时代到来之前，网页中的动画通常通过 JavaScript 动态地改变元素的样式属性来实现 linear：动画从头到尾的速度保持一致。 ease-in：动画以缓慢的速度开始。 ease-out：动画以缓慢的速度结束。 ease-in-out：动画缓慢开始和结束，中间加速。 动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。 both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。 4 常用动画库介绍 动画库链接：Animate.css 是一个方便的 CSS 动画库，提供多种现成的动画效果。 基础用法：通常结合 JavaScript 控制动画的触发条件。
38710编辑于 2025-06-01 - 来自专栏grain先森
前端-SVG 实现动态模糊动画效果
/www.codeceo.com/article/svg-motion-blur-effect.html 今天我们将向大家展示如何制作SVG动态模糊效果，并将其应用于HTML元素的常规JS或CSS动画 动态模糊是一种广泛使用于动态影像和动画的技术，它能使动作看起来更加平滑自然。 ? /index.html） 源码下载（http://www.html5tricks.com/html5-svg-motion-blur-effect.html） 动态模糊是静止图像或一系列图像（如电影或动画 为了对动画应用动态模糊效果，我们需要在每个帧中根据对象的速度和它移动的方向应用方向模糊。 ? 那么，怎么才能产生这种效果呢？ 实现方法可能会根据设置的不同而不同；例如动画如何完成方面的设置等等。在本教程中，我们将采用更通用的方法，尽管它可能无法针对所有用例进行优化，但适用于大多数JS和CSS动画。
2.9K31发布于 2019-03-29 - 来自专栏京程一灯
分享 | 前端性能优化（CSS动画篇）
） 层和CSS动画 简化一下上述过程，每一帧动画浏览器可能需要做如下工作： 1. 取而代之的更好方法是使用translate，这个不会触发重布局 JS动画和CSS3动画的比较 我们经常面临一个抉择：是使用JavaScript的动画还是使用CSS的动画，下面将对比一下这两种方式 JS动画 优点：JavaScript的动画与CSS预先定义好的动画不同，可以在其动画过程中对其进行控制：开始、暂停、回放、中止、取消都是可以做到的。 而且一些动画效果，比如视差滚动效果，只有JavaScript能够完成 CSS动画 缺点：缺乏强大的控制能力。而且很难以有意义的方式结合到一起，使得动画变得复杂且易于出问题。 最好提前申明动画，这样能让浏览器提前对动画进行优化。
2.3K20发布于 2019-03-28
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号