angular-timeline-animations.css 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. .timeline-hidden {
  2. display: block !important;
  3. opacity: 0; }
  4. @media only screen and (min-width: 768px) {
  5. .timeline timeline-event:nth-child(odd) timeline-panel.bounce-in {
  6. animation: cd-bounce-2 0.5s; }
  7. .timeline timeline-event:nth-child(even) timeline-panel.bounce-in {
  8. animation: cd-bounce-2-inverse 0.5s; } }
  9. @media only screen and (max-width: 767px) {
  10. .timeline timeline-event timeline-panel.bounce-in {
  11. animation: cd-bounce-2 0.5s; } }
  12. .timeline timeline-event timeline-badge.bounce-in {
  13. animation: cd-bounce-1 0.5s; }
  14. @-webkit-keyframes cd-bounce-2 {
  15. 0% {
  16. opacity: 0;
  17. -webkit-transform: translateX(-100px); }
  18. 60% {
  19. opacity: 1;
  20. -webkit-transform: translateX(20px); }
  21. 100% {
  22. -webkit-transform: translateX(0); } }
  23. @-moz-keyframes cd-bounce-2 {
  24. 0% {
  25. opacity: 0;
  26. -moz-transform: translateX(-100px); }
  27. 60% {
  28. opacity: 1;
  29. -moz-transform: translateX(20px); }
  30. 100% {
  31. -moz-transform: translateX(0); } }
  32. @keyframes cd-bounce-2 {
  33. 0% {
  34. opacity: 0;
  35. -webkit-transform: translateX(-100px);
  36. -moz-transform: translateX(-100px);
  37. -ms-transform: translateX(-100px);
  38. -o-transform: translateX(-100px);
  39. transform: translateX(-100px); }
  40. 60% {
  41. opacity: 1;
  42. -webkit-transform: translateX(20px);
  43. -moz-transform: translateX(20px);
  44. -ms-transform: translateX(20px);
  45. -o-transform: translateX(20px);
  46. transform: translateX(20px); }
  47. 100% {
  48. -webkit-transform: translateX(0);
  49. -moz-transform: translateX(0);
  50. -ms-transform: translateX(0);
  51. -o-transform: translateX(0);
  52. transform: translateX(0); } }
  53. @-webkit-keyframes cd-bounce-2-inverse {
  54. 0% {
  55. opacity: 0;
  56. -webkit-transform: translateX(100px); }
  57. 60% {
  58. opacity: 1;
  59. -webkit-transform: translateX(-20px); }
  60. 100% {
  61. -webkit-transform: translateX(0); } }
  62. @-moz-keyframes cd-bounce-2-inverse {
  63. 0% {
  64. opacity: 0;
  65. -moz-transform: translateX(100px); }
  66. 60% {
  67. opacity: 1;
  68. -moz-transform: translateX(-20px); }
  69. 100% {
  70. -moz-transform: translateX(0); } }
  71. @keyframes cd-bounce-2-inverse {
  72. 0% {
  73. opacity: 0;
  74. -webkit-transform: translateX(100px);
  75. -moz-transform: translateX(100px);
  76. -ms-transform: translateX(100px);
  77. -o-transform: translateX(100px);
  78. transform: translateX(100px); }
  79. 60% {
  80. opacity: 1;
  81. -webkit-transform: translateX(-20px);
  82. -moz-transform: translateX(-20px);
  83. -ms-transform: translateX(-20px);
  84. -o-transform: translateX(-20px);
  85. transform: translateX(-20px); }
  86. 100% {
  87. -webkit-transform: translateX(0);
  88. -moz-transform: translateX(0);
  89. -ms-transform: translateX(0);
  90. -o-transform: translateX(0);
  91. transform: translateX(0); } }
  92. @-webkit-keyframes cd-bounce-1 {
  93. 0% {
  94. opacity: 0;
  95. -webkit-transform: scale(0.5); }
  96. 60% {
  97. opacity: 1;
  98. -webkit-transform: scale(1.2); }
  99. 100% {
  100. -webkit-transform: scale(1); } }
  101. @-moz-keyframes cd-bounce-1 {
  102. 0% {
  103. opacity: 0;
  104. -moz-transform: scale(0.5); }
  105. 60% {
  106. opacity: 1;
  107. -moz-transform: scale(1.2); }
  108. 100% {
  109. -moz-transform: scale(1); } }
  110. @keyframes cd-bounce-1 {
  111. 0% {
  112. opacity: 0;
  113. -webkit-transform: scale(0.5);
  114. -moz-transform: scale(0.5);
  115. -ms-transform: scale(0.5);
  116. -o-transform: scale(0.5);
  117. transform: scale(0.5); }
  118. 60% {
  119. opacity: 1;
  120. -webkit-transform: scale(1.2);
  121. -moz-transform: scale(1.2);
  122. -ms-transform: scale(1.2);
  123. -o-transform: scale(1.2);
  124. transform: scale(1.2); }
  125. 100% {
  126. -webkit-transform: scale(1);
  127. -moz-transform: scale(1);
  128. -ms-transform: scale(1);
  129. -o-transform: scale(1);
  130. transform: scale(1); } }