css.scss 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. @mixin transform($trans) {
  2. -webkit-transform: $trans;
  3. -moz-transform: $trans;
  4. -ms-transform: $trans;
  5. -o-transform: $trans;
  6. transform: $trans;
  7. }
  8. @mixin transition($trans) {
  9. -moz-transition: $trans;
  10. -ms-transition: $trans;
  11. transition: $trans;
  12. }
  13. /*平滑动画,向上滑入,向下滑出*/
  14. @keyframes slidedown {
  15. from {
  16. transform: translateY(0);
  17. }
  18. to {
  19. transform: translateY(100%);
  20. }
  21. }
  22. @-webkit-keyframes slidedown {
  23. from {
  24. -webkit-transform: translateY(0);
  25. }
  26. to {
  27. -webkit-transform: translateY(100%);
  28. }
  29. }
  30. @-webkit-keyframes slideup {
  31. from {
  32. -webkit-transform: translateY(100%);
  33. }
  34. to {
  35. -webkit-transform: translateY(0);
  36. }
  37. }
  38. @keyframes slideup {
  39. from {
  40. transform: translateY(100%);
  41. }
  42. to {
  43. transform: translateY(0);
  44. }
  45. }
  46. .slidedown {
  47. animation: slidedown 0.3s linear;
  48. animation-fill-mode:forwards;
  49. @include transform(translateY(100%));
  50. }
  51. .slideup {
  52. animation: slideup 0.3s linear;
  53. animation-fill-mode:forwards;
  54. @include transform(translateY(0));
  55. }