animation.css 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /* make keyframes that tell the start state and the end state of our object */
  2. @-webkit-keyframes fadeIn {
  3. from {
  4. opacity: 0;
  5. }
  6. to {
  7. opacity: 1;
  8. }
  9. }
  10. @-moz-keyframes fadeIn {
  11. from {
  12. opacity: 0;
  13. }
  14. to {
  15. opacity: 1;
  16. }
  17. }
  18. @keyframes fadeIn {
  19. from {
  20. opacity: 0;
  21. }
  22. to {
  23. opacity: 1;
  24. }
  25. }
  26. .fade-in {
  27. opacity: 0; /* make things invisible upon start */
  28. -webkit-animation: fadein ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  29. -moz-animation: fadein ease-in 1;
  30. animation: fadeIn ease-in 1;
  31. -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1) */
  32. -moz-animation-fill-mode: forwards;
  33. animation-fill-mode: forwards;
  34. -webkit-animation-duration: 1s;
  35. -moz-animation-duration: 1s;
  36. animation-duration: 1s;
  37. }
  38. /* page transition */
  39. .fade-enter {
  40. opacity: 0;
  41. }
  42. .fade-enter.fade-enter-active {
  43. opacity: 1;
  44. transition: opacity 500ms ease-in;
  45. }
  46. .fade-exit {
  47. opacity: 1;
  48. }
  49. .fade-exit.fade-exit-active {
  50. opacity: 0;
  51. transition: opacity 300ms ease-in;
  52. }