Document .container{ width: 400px; height: 400px; background-color: #ccc; margin: 100px auto; position: relative; } .container .part{ box-sizing: border-box; width: 360px; height: 120px; border-radius: 180px/60px; border: 18px solid #61dafb; position: absolute; left: 20px; top: 140px; } .container .one{ animation: rubberBand1 1s linear infinite; } @keyframes rubberBand1 { from { transform: scale3d(1, 1, 1) rotate(57deg); } 30% { transform: scale3d(1.25, 0.75, 1) rotate(57deg); } 40% { transform: scale3d(0.75, 1.25, 1) rotate(57deg); } 50% { transform: scale3d(1.15, 0.85, 1) rotate(57deg); } 65% { transform: scale3d(.95, 1.05, 1) rotate(57deg); } 75% { transform: scale3d(1.05, .95, 1) rotate(57deg); } to { transform: scale3d(1, 1, 1) rotate(57deg); }} .container .two{ animation: rubberBand2 1s linear infinite; } @keyframes rubberBand2 { from { transform: scale3d(1, 1, 1) rotate(123deg); } 30% { transform: scale3d(1.25, 0.75, 1) rotate(123deg); } 40% { transform: scale3d(0.75, 1.25, 1) rotate(123deg); } 50% { transform: scale3d(1.15, 0.85, 1) rotate(123deg); } 65% { transform: scale3d(.95, 1.05, 1) rotate(123deg); } 75% { transform: scale3d(1.05, .95, 1) rotate(123deg); } to { transform: scale3d(1, 1, 1) rotate(123deg); }} .ball{ width: 60px; height: 60px; background-color: #61dafb; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-top: -30px; margin-left: -30px; }
我发现如果你定义了transform,animate.css会把你写的效果覆盖，但是加了!important又会没动画效果，因为上面的办法就很笨，给写了transform的元素自己加动画，有不有什么好办法可以解决？然后你们有不有什么更炫酷的做法 |
天盟APP下载
