背景

事情是这样的，工作中除了中后台相关的业务，大部分是C端的业务工作需求。其中定期会有一些的活动页面开发，活动中都会有抽奖环节，经常需要实现各式各样的抽奖动画效果。这一次我接触到的效果自己觉得还挺有趣，只要平时有实现过一些动画，这个效果实现不难。这次记录下来，并借这个机会再捋一捋CSS动画--Animation相关知识。

在继续下文前，先来瞅一瞅这个有趣的动画效果（🤔仅个人觉得有趣，若无感，欢迎划走哈哈哈）

关于CSS动画属性-animation

简述

CSS Animation是一种使用CSS属性来实现动画效果的技术。通过定义关键帧（keyframes）和动画属性，可以控制元素的变换、移动、旋转和透明度等，从而实现各种炫目的动态效果。

动画属性

• animation-name：指定关键帧的名称，简单来说就是用来指定元素使用哪个关键帧。

@keyframes slide-in {
from {
  opacity: 0;
  transform: translateX(-100%);
}
to {
  opacity: 1;
  transform: translateX(0);
}
}
.element {
animation-name: slide-in;
}

• animation-duration：指定动画的持续时间，以秒或毫秒为单位,表示从动画开始到动画结束所经过的时间。
• animation-timing-function：控制动画的速度曲线，表示动画在不同时间点的变化速度。比如：linear、ease、ease-in、ease-out是比较常用的几个。
• animation-delay：指定动画延迟的时间，正值表示延迟开始，负值表示立即开始，但是从指定的时间开始动画效果。
• animation-iteration-count：控制动画的重复次数，这里如果有需要无限循环，动画一直保持，设置infinite表示无限重复。
• animation-direction：指定动画的播放方向，决定了动画是正向播放还是反向播放，或者在每次循环时交替播放。

几个具体的值：

1. normal：表示动画按照正常的顺序播放
2. reverse：反向播放
3. alternate：交替播放，先正向后反向
4. alternate-reverse：交替播放，先反向后正向

这些属性既可以分开设置，也可以整合起来一行代码设置：

animation: name duration timing-function delay iteration-count direction

关键帧@keyframes

它是用来指定动画在不同阶段的样式和属性，从而创建出更加复杂和精细的动画效果。下面是关于 @keyframes规则的详细介绍：

@keyframes animation-name {
    keyframe-selector {
      /* 定义样式和属性 */
    }
}

其中，keyframe-selector 是指定关键帧的百分比或关键字（如 from 和 to）。定义百分比相对比较灵活，可以更细粒度的去定义每个阶段的样式属性。

实现这个动画效果

搭建整个html结构

再次回顾一下之前展示的动画效果：有五个球，各自在空中飞舞了一会，最后达到一种抽奖搅拌机的效果，搅拌结束后又各自回到了自己原来的位置。

这里需要将几张球拆离开，我这边直接使用多个img来展示，每个img对应设置他们的绝对位置，这样它的初始状态就算画好了。

<div class="prize-box">
  <img class="luck-image-01" src="./image/皮球.png">
  <img class="luck-image-02" src="./image/皮球.png">
  <img class="luck-image-03" src="./image/皮球.png">
  <img class="luck-image-04" src="./image/皮球.png">
  <img class="luck-image-05" src="./image/皮球.png">
</div>

.prize-box{
    position:relative;
    width:400px;
    height:300px;   
    background:yellow;
}
.luck-image-01 {
    position: absolute;
    bottom: 11%;
    left: 20%;
    z-index: 1;
    width: 10%;
}
.luck-image-02 {
    position: absolute;
    bottom: 11%;
    left: 31%;
    z-index: 1;
    width: 10%;
}
.luck-image-03 {
    position: absolute;
    bottom: 11%;
    left: 41%;
    z-index: 2;
    width: 10%;
}
.luck-image-04 {
    position: absolute;
    bottom: 11%;
    left: 53%;
    z-index: 3;
    width: 10%;
}
.luck-image-05 {
    position: absolute;
    bottom: 11%;
    left: 65%;
    z-index: 4;
    width: 10%;
}

这里设置z-index主要为了在动画的过程中有一定层次感。

效果如下：

动画拆分

我们刚开始感觉是全部的球飞来飞去有点乱，为了更好的实现，先看第一个球，我们可以把它的飞行路线拆分成多个点，这里就是需要创建关键帧，即我们根据这个整体行程通过百分比的方式设置几个点，然后对各自的点设置不同的css样式 ，最后通过@keyframes将这些连贯起来，动作就串起来了。具体效果如下：

.luck-image-animation-1{-webkit-animation:luck-image-animation-1 both 1.4s;animation:luck-image-animation-1 both 1.4s}
@keyframes luck-image-animation-1{
    0% {bottom:11%;left:20%;z-index:1;transform:rotate(0deg)}
    10% {bottom:25%;left:35%;transform:rotate(56deg)}
    20% {bottom:15.91731%;left:60%;transform:rotate(265deg)}
    30% {bottom:45.91731%;left:15.66667%;transform:rotate(185deg)}
    40% {bottom:18.91731%;left:37.66667%;transform:rotate(55deg)}
    50% {bottom:25.91731%;left:26.66667%;z-index:5;transform:rotate(35deg)}
    60% {bottom:36.91731%;left:61%;transform:rotate(248deg)}
    70% {bottom:42.91731%;left:24%;transform:rotate(135deg)}
    80% {bottom:16.91731%;left:52%;z-index:2;transform:rotate(79deg)}
    90% {bottom:24.91731%;left:32.66667%;transform:rotate(286deg)}
    100% {bottom:11%;left:20%;z-index:1;transform:rotate(0deg)}
}

剩余球的关键帧

可以参考第一个球，来设计每个百分比的位置，不同的设置，最后结合在一块生成的效果会有所不同，这里就不再贴代码了。

css动画整合

最后加一个触发按钮，同时给这几个球添加动画class，最终就能还原文章开头演示的效果啦。

总结

一个有趣的抽奖效果就这样实现啦。第一眼看上去也许没有头绪，但是可以将问题进行细化，运用自己学过的或者看到过的内容来实现它。这样一看，如果光考虑效果还原，是不是也没有那么难实现呢🤭

这样的一个动画效果，现在就可以使用纯CSS实现，可见，CSS动画给网页开发带来了更多的可能性。以前实现一个复杂的动画效果可能还需要通过js处理改变dom的状态，现在只需要通过设置CSS各种属性就可以完美实现各种动画效果。当前在使用之前我们还需要考虑它的浏览器兼容性，不能为了用而用，最重要的是为了更好的实现，为了更好的用户体验。