keyframes.less 713 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. @keyframes 'bounce' {
  2. from {
  3. top: 100px;
  4. animation-timing-function: ease-out;
  5. }
  6. 25% {
  7. top: 50px;
  8. animation-timing-function: ease-in;
  9. }
  10. 50% {
  11. top: 100px;
  12. animation-timing-function: ease-out;
  13. }
  14. 75% {
  15. top: 75px;
  16. animation-timing-function: ease-in;
  17. }
  18. to {
  19. top: 100px;
  20. }
  21. }
  22. @-webkit-keyframes flowouttoleft {
  23. 0% { -webkit-transform: translateX(0) scale(1); }
  24. 60%, 70% { -webkit-transform: translateX(0) scale(.7); }
  25. 100% { -webkit-transform: translateX(-100%) scale(.7); }
  26. }
  27. div {
  28. animation-name: 'diagonal-slide';
  29. animation-duration: 5s;
  30. animation-iteration-count: 10;
  31. }
  32. @keyframes 'diagonal-slide' {
  33. from {
  34. left: 0;
  35. top: 0;
  36. }
  37. to {
  38. left: 100px;
  39. top: 100px;
  40. }
  41. }