_hover.scss 593 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. %hover-animation {
  2. transition: transform 0.3s ease;
  3. &:hover {
  4. will-change: transform;
  5. }
  6. }
  7. .hover-elevate-up {
  8. @extend %hover-animation;
  9. &:hover {
  10. transform: translateY(-4px);
  11. }
  12. }
  13. .hover-elevate-down {
  14. @extend %hover-animation;
  15. &:hover {
  16. transform: translateY(4px);
  17. }
  18. }
  19. .hover-scale {
  20. @extend %hover-animation;
  21. &:hover {
  22. transform: scale(1.1);
  23. }
  24. }
  25. .hover-rotate-end {
  26. @extend %hover-animation;
  27. &:hover {
  28. transform: rotate(4deg);
  29. }
  30. }
  31. .hover-rotate-start {
  32. @extend %hover-animation;
  33. &:hover {
  34. transform: rotate(-4deg);
  35. }
  36. }