2024年前端最全CSS3基础之动画，怎样学习web前端开发

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法

  

文章目录

• 前言

• 1.制作动画过程

• • • • 1.1用keyframs定义动画

• 1.2使用动画

• 1.3示例

• 2.动画常用属性

• 3.动画简写属性

• 4.速度曲线细节

---

前言

=================================================================

动画animation是CSS3中新增的内容之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

---

1.制作动画过程

=======================================================================

制作动画分为两步：先定义动画，再使用动画

1.1用keyframs定义动画

• 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列

• 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果

• 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数

• 请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%

1.2使用动画

1.3示例