/* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-animation.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Animation -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .animation(@animation) { animation: @animation; } .animation-name(@animation-name) { animation-name: @animation-name; } .animation-duration(@animation-duration) { animation-duration: @animation-duration; } .animation-timing-function(@animation-timing-function) { animation-timing-function: @animation-timing-function; } .animation-iteration-count(@animation-iteration-count) { animation-iteration-count: @animation-iteration-count; } .animation-direction(@animation-direction) { animation-direction: @animation-direction; } .animation-delay(@animation-delay) { animation-delay: @animation-delay; } .animation-play-state(@animation-play-state) { animation-play-state: @animation-play-state; } .animation-fill-mode(@animation-fill-mode) { animation-fill-mode: @animation-fill-mode; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Animation Keyframes -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Fade In ----------------------------------------------------------------------------- */ @keyframes fade-in { .fade-in(); } .fade-in() { 0% { opacity: 0.0; } 100% { opacity: 1.0; } } /* ----------------------------------------------------------------------------- Fade Out ----------------------------------------------------------------------------- */ @keyframes fade-out { .fade-out(); } .fade-out() { 0% { opacity: 1.0; } 100% { opacity: 0.0; } } /* ----------------------------------------------------------------------------- Zoom In ----------------------------------------------------------------------------- */ @keyframes zoom-in { .zoom-in(); } .zoom-in() { 0% { opacity: 0; .scale3d(0.5, 0.5, 0.5); } 50% { opacity: 1.0; .scale3d(1.0, 1.0, 1.0); } } /* ----------------------------------------------------------------------------- Zoom Out ----------------------------------------------------------------------------- */ @keyframes zoom-out { .zoom-out(); } .zoom-out() { 0% { opacity: 1.0; .scale3d(1.0, 1.0, 1.0); } 50% { opacity: 0; .scale3d(0.5, 0.5, 0.5); } 100% { opacity: 0; .scale3d(0.5, 0.5, 0.5); } }