web前端入门到实战：纯CSS实现简单骨骼动画

1 背景

某天设计师来找我说，“这个心愿牌傻傻地挂在那不好看，加个动效呗，就左右摆动一下就行，很简单的！”，我一想，行呀，提升用户视觉体验，开搞。

十分钟后，🥶不对呀，这个左右摆动好假，不像现实中风吹的效果。

注：此处加快了动画的速度和摆动的幅度。

专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）
.animate-1 {
    animation: swing1 1s ease-in-out infinite;
    transform: rotate(-5deg);
    transform-origin: top center;
}
@keyframes swing1 {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg);}
    100% { transform: rotate(-5deg);}
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nXiKaUeF-1589291470332)(https://upload-images.jianshu.io/upload_images/20062408-3dcd388d95f2239d?imageMogr2/auto-orient/strip)]

冷静思考🤔，为啥这个摆动会没有灵魂。于是拿起工卡开始摆动，看看现实中的摆动效果是咋样的，最后豁然开朗：原来现实中的心愿牌（和工卡同理）在受力的时候，并不会整体摆动，而是会根据节点位置分成几部分有关联地摆动，这其实是个简单的骨骼动画！那到底怎么去实现呢？

2 骨骼动画

关于前端骨骼动画的实现可以参考[《骨骼动画原理与前端实现浅谈》]，里面简单提及了css和canvas两种实现方式。这里将以这个心愿牌摆动动画为例，和大家一起研究如何使用css来实现。

2.1 分离元素

要让动画元素分开运动，首先需要拆分元素。拆分的依据是上面提到的节点，也就是骨骼动画中所谓的关节。例如这个心愿牌就有两个关节，分别在牌的上面和牌的下面，于是我们能拆分出3个动画元素：