Cool CSS Animation
学习使用 CSS 编码酷炫、抽象的效果，发现 CSS 动画的无限可能。
如何编写酷炫的CSS动画
本教程介绍了如何使用HTML和CSS编写酷炫的CSS动画。它适用于已经对HTML和CSS有良好理解，并且对Sass有一定熟悉度的人。
从我的经验来看，最具挑战性的部分不是理解代码，而是学会如何进行实验。因此，在编写CSS动画时，拥有实时视觉反馈非常重要。我更喜欢使用一个基于浏览器的编辑器，可以在我编写代码时自动刷新。（我推荐CodePen！）
通过使用CSS关键帧、动画延迟和CSS变换，我们将创建一个简单而有趣的CSS动画。让我们开始吧！
创建一个要动画化的HTML元素
从一个单一的元素开始。这将构成CSS动画的基础。为了更容易整体管理动画，创建一个包装元素，并将内部元素的 position 设置为 absolute。
/* Sass */
.circle {
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: turquoise;
}
<!-- HTML --><div class="animation-wrapper "><div class="circle "></div ></div >
重复元素以创建图案
复制该元素，然后使用Sass循环将它们间隔开。每个元素都可以使用 :nth-child 选择器来定位。为了分散这些元素，我设置的是 left 属性而不是 transform: translate()，因为稍后动画会设置 transform 属性，我不想覆盖它。
/* Sass */
.circle {
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: turquoise;
}
@for $num from 1 through 8 {
.circle:nth-child(#{$num}) {
left: ($num - 1) * 30px;
}
}
<!-- HTML --><div class="animation-wrapper "><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ></div >
使用CSS关键帧添加运动
这里保持简单。我发现开始添加运动的最佳方法是创建关键帧并动画化 transform 属性。在这个例子中，我正在动画化 transform: translate()。对于关键帧，我先从一两个步骤开始，然后再逐步增加更多步骤。
/* Sass */
.circle {
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: turquoise;
animation: move-the-circle 1s infinite;
transform-origin: center center;
}
@for $num from 1 through 8 {
.circle:nth-child(#{$num}) {
left: ($num - 1) * 30px;
}
}
@keyframes move-the-circle {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 50px);
}
100% {
transform: translate(0, 0);
}
}
<!-- HTML --><div class="animation-wrapper "><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ></div >
使用CSS动画延迟错开运动
使用与之前相同的Sass循环，为每个元素设置 animation-delay 属性，使其略微错开。这立刻使CSS动画变得更加有趣。
/* Sass */
.circle {
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: turquoise;
animation: move-the-circle 1s infinite;
transform-origin: center center;
}
@for $num from 1 through 8 {
.circle:nth-child(#{$num}) {
left: ($num - 1) * 30px;
animation-delay: $num * .1s;
}
}
@keyframes move-the-circle {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 50px);
}
100% {
transform: translate(0, 0);
}
}
<!-- HTML --><div class="animation-wrapper "><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ></div >
尝试不同的值和属性
这里才是乐趣所在！在 @keyframes 块中，当你改变元素的 background-color、opacity 和 scale() 时会发生什么？通过尝试不同的值和属性，你可以使用相同的基本设置创建许多变化。试着添加更多的关键帧步骤，调整时间，并更改值，直到你创造出一些酷炫且新颖的效果。
/* Sass */
.circle {
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: turquoise;
animation: move-the-circle 1s infinite;
transform-origin: center center;
}
@for $num from 1 through 8 {
.circle:nth-child(#{$num}) {
left: ($num - 1) * 30px;
animation-delay: $num * .1s;
}
}
@keyframes move-the-circle {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
background-color: turquoise;
}
50% {
transform: translate(0, 50px) scale(.4);
opacity: .5;
background-color: blue;
}
100% {
transform: translate(0, 0) scale(1);
opacity: 1;
background-color: turquoise;
}
}
<!-- HTML --><div class="animation-wrapper "><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ><div class="circle "></div ></div >
CSS 动画片段
创建 CSS 动画时无需从零开始。使用下面提供的 CSS 动画、关键帧、缓动和 Sass 循环代码片段来开始。
CSS Animation Basics
Easy Animation Shorthand
.class {
animation: my-animation 1s ease infinite;
}
End animation on last frame
.class {
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
Keyframes Block
@keyframes my-animation {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 0);
}
}
CSS Animation Easing &Timing
Easing with keyword
.class {
animation-timing-function: ease-in;
}
Easing with bezier function
.class {
animation-timing-function: cubic-bezier(.44,.24,.83,.67);
}
Bounce easing
.class {
animation-timing-function: cubic-bezier(.4,1.21,.83,1.16);
}
Sass Loops for CSS Animation
Sass Loop (Delay)
$total: 10;
$delay: .1s;
@for $n from 1 through $total {
.element:nth-child(#{$n}) {
animation-delay: $n * $delay;
}
}
Random Number Function
@function randomNum($min, $max) {
$rand: random();
$randomNum: $min + floor($rand * (($max - $min) + 1));
@return $randomNum;
}
Sass Loop (Keyframes)
$total: 10;
$delay: .1s;
$duration: 2s;
@for $n from 1 through $total {
.element:nth-child(#{$n}) {
animation: my-animation-#{$n} $duration ease-out infinite;
}
@keyframes my-animation-#{$n} {
0% {
transform: translate(0, 0);
}
50% {
transform: translate($n * 10px, 0);
}
100% {
transform: translate(0, 0);
}
}
}