## 动力学知识库

`{animation: party_ball 2s ease infinite;}@keyframes party_ball {25% {-webkit-transform: scale(.5) rotateZ(90deg);transform: scale(.5) rotateZ(90deg);top: 0;left: 100%;}50% {-webkit-transform: scale(1) rotateZ(180deg);transform: scale(1) rotateZ(180deg);top: 100%;left: 100%;}75% {-webkit-transform: scale(.5) rotateZ(270deg);transform: scale(.5) rotateZ(270deg);top: 100%;left: 0;}100% {-webkit-transform: scale(1) rotateZ(360deg);transform: scale(1) rotateZ(360deg);top: 0;left: 0;} }`

`{animation: fire_ball 1.5s linear infinite;}@keyframes fire_ball {50% {height: 30px;width: 30px;top: 50%;}100% {height: 0;width: 0;top: 0;} }`

`.pac_head {border: 25px solid #fff;border-right-color: transparent;border-radius: 50%; }`

`@keyframes pac_ball {100% {right: 55%;} }`

`@keyframes beat_ball {25% {transform: translateY(25%) rotate(22.5deg);//下落border-bottom-right-radius: 10%;}50% {border-bottom-right-radius: 100%;transform: translateY(50%) scale(1, 0.8) rotate(45deg)//scale，是为了让形变看起来有弹性}75% {transform: translateY(25%) rotate(67.5deg)//上升}100% {transform: translateY(0) rotate(90deg)//旋转90°结束一个周期，刚好和初始状态一模一样，那就直接重复执行动画即可} }`

`@keyframes beat_shadow {50%{transform: scale(1.25,0.8);} }`

div负责旋转，伪类负责改变高度，各司其职就做来了。

`@keyframes locker_ball {//div旋转25%{transform: rotateZ(180deg);}50%{transform: rotateZ(180deg);}75%{transform: rotateZ(360deg);}100%{transform: rotateZ(360deg);} } @keyframes locker_ballh { //伪类高度改变25%{height: 40px;}50%{height: 0;}75%{height: 0;}100%{height: 40px;} }`

`@keyframes clock {100%{transform: rotateZ(360deg);} }`