keyframes.css 768 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  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% {
  24. -webkit-transform: translateX(0) scale(1);
  25. }
  26. 60%,
  27. 70% {
  28. -webkit-transform: translateX(0) scale(.7);
  29. }
  30. 100% {
  31. -webkit-transform: translateX(-100%) scale(.7);
  32. }
  33. }
  34. div {
  35. animation-name: 'diagonal-slide';
  36. animation-duration: 5s;
  37. animation-iteration-count: 10;
  38. }
  39. @keyframes 'diagonal-slide' {
  40. from {
  41. left: 0;
  42. top: 0;
  43. }
  44. to {
  45. left: 100px;
  46. top: 100px;
  47. }
  48. }