bounce.css 714 B

12345678910111213141516171819202122232425262728293031323334
  1. @keyframes bounce {
  2. from,
  3. 20%,
  4. 53%,
  5. to {
  6. animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  7. transform: translate3d(0, 0, 0);
  8. }
  9. 40%,
  10. 43% {
  11. animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  12. transform: translate3d(0, -30px, 0) scaleY(1.1);
  13. }
  14. 70% {
  15. animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  16. transform: translate3d(0, -15px, 0) scaleY(1.05);
  17. }
  18. 80% {
  19. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  20. transform: translate3d(0, 0, 0) scaleY(0.95);
  21. }
  22. 90% {
  23. transform: translate3d(0, -4px, 0) scaleY(1.02);
  24. }
  25. }
  26. .bounce {
  27. animation-name: bounce;
  28. transform-origin: center bottom;
  29. }