在常规的动画制作中，我们经常使用 @keyframes 关键帧来配合 animation。今天我们提供另一种思路，主角其实也是我在之前简单介绍过的 @starting-style。如果你忘记了，可以在 @starting-style的基础介绍 一文中复习！
效果预览
先上代码
废话不多说，我们直接先看代码，然后再作解释。先啰嗦一堆，佬友们也不爱看 
<div class="box"></div>
@property --i {
syntax: "<number>";
inherits: false;
initial-value: 999;
}
body {
height: 100vh;
background: #2e2e2e;
display: grid;
place-content: center;
}
.box {
width: 150px;
aspect-ratio: 1;
background: hsl(calc(var(--i) * 10) 80% 60%);
translate: 0 calc(sin(var(--i)) * 20px);
rotate: calc(clamp(0, mod(var(--i), 10) - 5, 1) * 90deg);
transition: --i 120s linear 1s;
@starting-style {
--i: 0;
}
}
代码解析
首先呢，还是稍微带一下 @starting-style ，简而言之：它的目的就是给元素加载之初定义样式的。
hsl 与 三角函数
background 与 translate 中的相对简单，hsl是一个颜色函数，在这里可以根据我们自定义属性 --i 来动态计算颜色，这个很常用！偏移中我们使用到了三角函数 sin，这在一些往复运动、圆周运动中我们也经常使用，你可以在 【动画而已】手摸手带你实现 WINDOWS 加载动画 案例中找到它的身影！
clamp 与 mod
接下来就是 clamp，它能够定义一组值：最小值 min、首选值 preferred 、最大值 max。它的作用是将 首选值 限制在 最小值 和 最大值 之间。基本规律如下：
- 如果
preferred < min，结果是min。 - 如果
preferred > max，结果是max。 - 如果
min <= preferred <= max，结果就是preferred。
在这之中，我们还使用到了一个此前从未登场的 mod ！ 它接收两个参数，简而言之就是用第一个数除以第二个数取余数。其用法不多赘述，使用过取模的都应该知道~
我们重点说一下为什么要用 mod(var(--i), 10) - 5 这个表达式。
简单起见，我们假设 --i 是整数，mod(var(--i), 10) 中，这个结果将总是在区间 [0,9]。
接下来，我们将上述计算结果减去5，那么会得到下列两种结果：
- 如果
mod(...)是 0, 1, 2, 3, 4, 5，结果分别是 -5, -4, -3, -2, -1, 0。 - 如果
mod(...)是 6, 7, 8, 9，结果分别是 1, 2, 3, 4。
最后，我们根据 clamp(0,res,1) 的限制，我们得到的值就只能是 0 或者 1。
- 如果是上述情形1，那么输出
0。 - 如果是上述情形2，那么输出
1。
在最后，我们 乘 90度，因此我们的旋转也只有两种形态，要么不转，要么顺时针旋转90度！
属性还是值？
善于思考的同学们，在看到 transition: --i 120s linear 1s 这段代码时，或许会产生疑问：这里有问题，应该使用 var(--i) 而不是 --i！
真的有问题吗？其实不然。之所以会产生这样的疑问，是因为我们过去使用自定义属性时，都是用 var() 来引用的！然而在这里，我们是在 transition 中，我们简单回顾一下 transition。
transition是一个简写，用于设置四个过渡效果相关的子属性：
transition: <property> <duration> <timing-function> <delay>;
分别代表 属性、过渡时间、速度曲线、延迟。
我们需要明确一点：过渡的是“属性”本身，而非“值” 。
因此我们这里需要使用到的是属性。但是问题又来了，我们定义的 --i ，通常是一个值诶！
这样想的话，我们就走进了误区，不要以为你经常用的就是对的！最高深的武林功夫常常是你最初接受到的！跟我一起大声读出它的名称 —— 自定义属性！ 属性，在名称中就已经告诉你了！
所以记住一点： CSS 自定义属性（变量）也是“属性” 。
至此，拨开云雾见青天了！大功告成~
内容其实挺简单的，本来没打算写的！但是呢，想了一下，里面的知识点还是有一些，能帮助到一人就功德无量吧！尤其是自定义属性那一点，除了是变量，也是属性！点不点赞，您看着办 
你可以在这里找到大鹅所有CSS知识分享哦
🔥【冷门知识】鹅のCSS大合集！长期追更~ 收藏 ≈ 学会
