_animations.less 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. //
  6. // Animations
  7. // _____________________________________________
  8. .animation(@animation) {
  9. -o-animation: @animation;
  10. -webkit-animation: @animation;
  11. animation: @animation;
  12. }
  13. .animation-name(@name) {
  14. -webkit-animation-name: @name;
  15. animation-name: @name;
  16. }
  17. .animation-duration(@duration) {
  18. -webkit-animation-duration: @duration;
  19. animation-duration: @duration;
  20. }
  21. .animation-timing-function(@timing-function) {
  22. -webkit-animation-timing-function: @timing-function;
  23. animation-timing-function: @timing-function;
  24. }
  25. .animation-delay(@delay) {
  26. -webkit-animation-delay: @delay;
  27. animation-delay: @delay;
  28. }
  29. .animation-iteration-count(@iteration-count) {
  30. -webkit-animation-iteration-count: @iteration-count;
  31. animation-iteration-count: @iteration-count;
  32. }
  33. .animation-direction(@direction) {
  34. -webkit-animation-direction: @direction;
  35. animation-direction: @direction;
  36. }
  37. .animation-fill-mode(@fill-mode) {
  38. -webkit-animation-fill-mode: @fill-mode;
  39. animation-fill-mode: @fill-mode;
  40. }
  41. // Backface visibility
  42. // Prevent browsers from flickering when using CSS 3D transforms. Default value is 'visible', but can be changed to 'hidden'
  43. .backface-visibility(@visibility) {
  44. -moz-backface-visibility: @visibility;
  45. -webkit-backface-visibility: @visibility;
  46. backface-visibility: @visibility;
  47. }
  48. //
  49. // Effects
  50. // _____________________________________________
  51. .transition (
  52. @_property: all,
  53. @_duration: .1s,
  54. @_timing-function: linear
  55. ) {
  56. transition: @_property @_duration @_timing-function;
  57. }
  58. .scale (
  59. @_size: .9
  60. ) {
  61. transform: scale(@_size);
  62. }