Modern Web Animations
现代web动画

Deep Dive into Animations and Transitions, The Web Animations API, Scroll Driven Animations and The View Transitions API
深入探讨动画和过渡：Web 动画API、滚动驱动动画和视图转换API

教程演示🔗

学生数量：55 个学生

上次更新时间：2024年5月

教程评分：0.0

教程语言：英语

教程字幕：中文、英语字幕

本课程包括：完整的永久访问权、14.5 小时 长的随选视频、在移动设备和电视上观看、结业证书、5 篇文章字幕

学习内容

1、了解CSS动画与过渡。
2、了解新的JavaScript Web Animations API。
3、深入了解卷动驱动的动画。
4、使用View Transitions API创建令人印象深刻的页面切换效果。

要求

1、使用CSS过渡与JavaScript
2、使用JavaScript过渡事件
3、过渡行为与离散动画
4、将元素从display: none 动画过渡到 display: block
5、使用@starting-style规则
6、更多关于@starting-style的信息。
7、”计时函数基础代码”
8、线性时间函数
9、使用三次贝塞尔插值实现平滑动画
10、使用步骤时序函数进行跳跃动画
11、CSS动画属性
12、添加多个动画
13、动画构成
14、动画填充模式
15、关于@media规则的更多内容
16、动画 JavaScript 事件
17、离散动画
18、动画练习（第一部分）
19、动画练习（第二部分）
20、动画练习（第三部分）
21、动画练习（第四部分）
22、需要一些基本的HTML、CSS和JavaScript知识。

课程介绍

欢迎来到现代Web动画，深入探讨无需依赖库，仅使用浏览器API的现代动画技术。

CSS动画和过渡已经存在很长时间了。但近期，新的API被引入到现代浏览器中，以进一步提升Web上的动画效果并赋予开发者更多控制权。

其中一项新增功能是Web动画API（WAAPI）。Web动画API为开发者解锁了浏览器动画引擎的强大功能，允许我们用JavaScript构建和控制动画。这是在Web上进行动画的最高效方式之一。

此外，CSS动画还增加了新特性，使我们能够根据滚动进度或元素在视口中的可见性来控制动画。通过添加如`animation-timeline`、`scroll-timeline`和`view-timeline`等属性，现在我们可以创建基于滚动而非时间的动画，无需加载外部库就能实现令人印象深刻的滚动驱动动画。

另一个现代浏览器的新特性是视图转换API的引入。这个API使得在不同的DOM状态之间创建流畅的动画变得简单。对于单页应用（SPA）中的路由导航时的动画效果，它特别有用。在视图转换API出现之前，这类动画的实现非常复杂。

在这门课程中，我们将详细讲解所有这些主题，并且还会涵盖旧版的CSS动画和过渡，深入讨论其各个方面。每个讨论的话题都会有实践示例和练习。

所以，如果你想让你的网站生动起来，现在就加入吧！

探索现代Web动画的精髓。利用Web动画API与CSS新特性，无库实现流畅滚动动画与视图转换。深入学习CSS动画、过渡与最新浏览器技术，为SPA带来直观体验。在本课程中，实战演练，让你的网页动起来，吸引更多流量。立即加入，赋予网站动态生命力