CSS3 动画面试深度解析：transition与transform

"前端大厂最新面试题集中在CSS3动画领域，主要涵盖了CSS动画的基本概念、实现方式以及一些具体的使用示例。" 在前端开发中，CSS3动画扮演着重要的角色，它们允许开发者通过CSS来创建动态效果，使得网页元素能够从一种样式平滑地过渡到另一种样式。CSS动画主要由以下三种方式实现： 1. Transition（过渡）：Transition（过渡）用于在两个CSS状态之间创建平滑的过渡效果。当一个CSS属性改变时，transition属性会控制这个变化的速度。例如，`transition: property duration timing-function delay;`，其中`property`指定需要过渡的CSS属性，`duration`定义过渡的持续时间，`timing-function`设定速度曲线（如ease-in, ease-out, linear等），`delay`则指定了过渡开始前的等待时间。在给定的代码示例中，`.base`元素在鼠标悬停时，宽度、高度、背景颜色和边框宽度会发生平滑变化。 2. Transform（转换）：Transform（转换）提供了对元素位置和形状的变换，包括`translate`（位移）、`scale`（缩放）、`rotate`（旋转）和`skew`（倾斜）。这些变换可以在不改变元素在文档流中位置的情况下进行，且通常与`transition`结合使用以创建动态效果。例如，`transform: translate(x, y) scale(z) rotate(angle) skew(x-angle, y-angle);`。 3. Animation（动画）：Animation（动画）是CSS3中最强大的动画工具，可以完全自定义动画过程，包括关键帧、重复次数、方向、填充模式等。通过`@keyframes`规则定义动画的过程，然后使用`animation`属性将动画应用到元素上。例如： ```css @keyframes example { 0% { /* 动画开始时的样式 */ transform: translateX(0); } 100% { /* 动画结束时的样式 */ transform: translateX(100px); } } /* 应用动画 */ element { animation-name: example; animation-duration: 2s; } ``` 在面试中，面试者不仅需要了解这些基本概念，还要能灵活运用到实际项目中，包括但不限于优化性能、处理浏览器兼容性问题以及理解各种动画属性的交互效果。对于前端开发者来说，熟练掌握CSS3动画技术是提升用户体验和增强页面互动性的关键。