CSS过渡与动画

写在前面

大家好，我是一溪风月🤑，一名前端工程师，在前端开发的世界里，CSS就像是一位神奇的魔法师，赋予网页绚丽的样式和灵动的交互效果。今天，咱们就深入探索几个重要的CSS属性------transform，以及过渡动画和关键帧动画，掌握它们能让你的网页设计更加得心应手！

一.`transform`

transform属性可以让元素实现旋转、缩放、倾斜和平移等各种神奇的效果，就像"变形金刚"一样自由变换形态。

（一）常见的`transform`函数

平移：translate(x, y) ：用于移动元素的位置。当只设置一个值时，是在x轴上的位移；设置两个值时，分别表示x轴和y轴上的位移。位移的值可以是数字（如100px），也可以是百分比（参照元素本身的边界框大小）。例如：

css 复制代码

div {
    transform: translate(50px, 30px);
}

缩放：scale(x, y) ：能改变元素的大小。一个值表示在x轴上的缩放，两个值分别控制x轴和y轴的缩放。缩放值为1时保持不变，2表示放大一倍，0.5则缩小一半。不支持百分比缩放。

CSS 复制代码

div {
    transform: scale(1.5);
}

旋转：rotate(deg) ：让元素围绕一个点旋转，只需要设置一个角度值（单位是deg）。正数表示顺时针旋转，负数表示逆时针旋转。旋转的原点受transform-origin属性影响。

CSS 复制代码

div {
    transform: rotate(45deg);
}

倾斜：skew(x, y) ：使元素在水平和垂直方向上倾斜。一个值表示在x轴上的倾斜，两个值分别表示x轴和y轴上的倾斜。同样，倾斜角度单位是deg，正负决定倾斜方向，且原点受transform-origin影响。

CSS 复制代码

div {
    transform: skew(10deg, 5deg);
}

（二）`transform-origin`：变形的原点

transform-origin用于设置元素变形的原点。它可以设置一个值（表示x轴的原点），也可以设置两个值（分别表示x轴和y轴的原点）。取值可以是<length>（从左上角开始计算）、<percentage>（参考元素本身大小），或者left、center、right、top、bottom这些关键字。例如：

CSS 复制代码

div {
    transform-origin: top left;
}

这样设置后，元素在进行旋转、缩放等变形时，就会以左上角为原点进行操作。

二.过渡动画

过渡动画transition能让元素在不同状态之间实现平滑过渡，给用户带来流畅的交互体验。它其实是transition-property、transition-duration、transition-timing-function和transition-delay这几个属性的简写。

（一）`transition-property`：指定过渡属性

可以用all表示所有可动画的属性，也可以指定具体的属性，比如width、opacity等。不过要注意，属性是否支持动画需要查看相关文档。例如，让元素的宽度在过渡效果中变化：

CSS 复制代码

div {
    transition-property: width;
}

（二）`transition-duration`：过渡时间

指定过渡动画所需的时间，单位可以是秒（s）或毫秒（ms）。比如设置一个2秒的过渡效果：

CSS 复制代码

div {
    transition-duration: 2s;
}

（三）`transition-timing-function`：动画变化曲线

它决定了动画在过渡过程中的速度变化，详细的曲线类型可以参考MDN文档。常见的取值有ease（逐渐变慢）、linear（匀速）、ease-in（加速）、ease-out（减速）等。

CSS 复制代码

div {
    transition-timing-function: ease-in-out;
}

（四）`transition-delay`：过渡延迟时间

指定过渡动画执行之前的等待时间，同样以秒或毫秒为单位。比如延迟1秒再开始过渡：

CSS 复制代码

div {
    transition-delay: 1s;
}

下面是一个完整的示例，当鼠标悬停在div上时，div的宽度从100px平滑过渡到200px：

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            width: 100px;
            height: 50px;
            background-color: blue;
            transition: width 2s ease-in-out 1s;
        }
        div:hover {
            width: 200px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

三.关键帧动画

过渡动画虽然好用，但它只能控制首尾两个状态。如果想要实现更复杂、更多状态变化的动画，就需要用到关键帧动画。

（一）使用`@keyframes`定义动画规则

通过@keyframes创建一个规则，在其中使用百分比定义各个阶段的样式。也可以用from（相当于0%）和to（相当于100%）关键字来简化定义。例如，让一个元素在动画过程中从左到右移动：

CSS 复制代码

@keyframes move {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(200px);
    }
}

（二）使用`animation`属性应用动画

animation属性是多个动画相关属性的简写，包括animation-name（指定执行哪一个关键帧动画）、animation-duration（动画持续时间）、animation-timing-function（动画变化曲线）、animation-delay（延迟执行时间）、animation-iteration-count（动画执行次数，infinite表示无限循环）、animation-direction（动画方向，常用normal和reverse）、animation-fill-mode（动画结束后保留的状态）和animation-play-state（控制动画运行或暂停，常用于JavaScript中）。

CSS 复制代码

div {
    animation: move 5s linear 0s infinite normal forwards;
}

在这个例子里，div元素会按照move关键帧动画的规则，以线性变化的方式，持续5秒，无限循环，正向播放，动画结束后停留在最后一帧的位置。

四.总结

这篇文章到这里就结束了🤖，掌握了transform以及过渡动画和关键帧动画这些CSS技巧，你就能在前端开发中实现更加精致的页面布局和生动的交互效果。无论是打造简洁美观的个人博客，还是功能丰富的商业网站，这些知识都能成为你的得力助手，让你的网页脱颖而出！在实际开发中，多动手实践，不断尝试不同的组合和效果，你会发现CSS的世界充满了无限可能。

CSS过渡与动画

写在前面

一.transform

（一）常见的transform函数

（二）transform-origin：变形的原点

二.过渡动画

（一）transition-property：指定过渡属性

（二）transition-duration：过渡时间

（三）transition-timing-function：动画变化曲线

（四）transition-delay：过渡延迟时间

三.关键帧动画

（一）使用@keyframes定义动画规则

（二）使用animation属性应用动画

四.总结

一.`transform`

（一）常见的`transform`函数

（二）`transform-origin`：变形的原点

（一）`transition-property`：指定过渡属性

（二）`transition-duration`：过渡时间

（三）`transition-timing-function`：动画变化曲线

（四）`transition-delay`：过渡延迟时间

（一）使用`@keyframes`定义动画规则

（二）使用`animation`属性应用动画