原文地址：https://segmentfault.com/a/1190000015221260
练习地址：https://scrimba.com/c/c3GEWmTb
感想： 原来animation 中可以有多个动画，用 , 分开即可！
HTML code：
<div class="loader"></div>
CSS code：
html, body { ???margin: 0; ???padding: 0;}body{ ???height: 100vh; ???display: flex; ???justify-content: center; ???align-items: center; ???background-color: black;}/* 定义.loader容器尺寸*/.loader{ ???position: relative; ???font-size: 20px; ???width: 10em; ???height: 3em; ???/* silver : 银色 */ ???border: 0.3em solid silver; ???border-radius: 3em; ???/* 给容器左右两侧涂上不同颜色 */ ???border-left-color: hotpink; ???border-right-color: blue; ???/* 让容器.loader不停旋转 */ ???animation: spin 3s linear infinite;}@keyframes spin{ ???to{ ???????transform: rotate(360deg); ???}}/* 画个小球 */.loader::before{ ???content: ‘‘; ???position: absolute; ???top: 0; ???left: 0; ???width: 3em; ???height: 3em; ???border-radius: 50%; ???background-color: blue; ???/* shift ： 转移 */ ???animation: ????????/* 这里居然可以放两个动画在一起，666 */ ???????shift 3s linear infinite, ???????change-color 3s linear infinite;}@keyframes shift{ ???50%{ ???????left: 7em; ???}}@keyframes change-color{ ???0%, 55%{ ???????background-color: blue; ???} ???5%, 50%{ ???????background-color: hotpink; ???}}46.纯 CSS 创作一个在容器中反弹的小球
原文地址：https://www.cnblogs.com/FlyingLiao/p/10462207.html