diff --git a/keyframes/zoom.expand.keyframes.less b/keyframes/zoom.expand.keyframes.less new file mode 100644 index 0000000..d398401 --- /dev/null +++ b/keyframes/zoom.expand.keyframes.less @@ -0,0 +1,74 @@ +// Expand Entrances +@keyframes tdExpandIn { + 0% { + opacity: 0; + transform: scale(0.85); + animation-timing-function: @easeOutCirc; + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes tdExpandInBounce { + 0% { + opacity: 0; + transform: scale(0.85); + animation-timing-function: @easeOutCirc; + } + 70% { + transform: scale(1.03); + animation-timing-function: ease; + } + 100% { + opacity: 1; + transform: scale(1); + animation-timing-function: ease; + } +} + +.tdExpandIn() { + animation-name: tdExpandIn; +} +.tdExpandInBounce() { + animation-name: tdExpandInBounce; +} + +// Expand Exits +@keyframes tdExpandOut { + 0% { + opacity: 1; + transform: scale(1); + animation-timing-function: @easeOutCirc; + } + 100% { + opacity: 0; + transform: scale(1.2); + } +} + +@keyframes tdExpandOutBounce { + 0% { + opacity: 1; + transform: scale(1); + animation-timing-function: @easeOutCirc; + } + 30% { + opacity: 1; + transform: scale(0.95); + animation-timing-function: ease; + } + 100% { + opacity: 0; + transform: scale(1.2); + } +} + +.tdExpandOut() { + animation-name: tdExpandOut; +} +.tdExpandOutBounce() { + animation-name: tdExpandOutBounce; +} diff --git a/keyframes/zoom.keyframes.less b/keyframes/zoom.shrink.keyframes.less similarity index 50% rename from keyframes/zoom.keyframes.less rename to keyframes/zoom.shrink.keyframes.less index 7f52ce5..1313f35 100644 --- a/keyframes/zoom.keyframes.less +++ b/keyframes/zoom.shrink.keyframes.less @@ -1,81 +1,3 @@ -// Expand Entrances -@keyframes tdExpandIn { - 0% { - opacity: 0; - transform: scale(0.85); - animation-timing-function: @easeOutCirc; - } - - 100% { - opacity: 1; - transform: scale(1); - } -} - -@keyframes tdExpandInBounce { - 0% { - opacity: 0; - transform: scale(0.85); - animation-timing-function: @easeOutCirc; - } - 70% { - transform: scale(1.03); - animation-timing-function: ease; - } - 100% { - opacity: 1; - transform: scale(1); - animation-timing-function: ease; - } -} - -.tdExpandIn() { - animation-name: tdExpandIn; -} -.tdExpandInBounce() { - animation-name: tdExpandInBounce; -} - -// Expand Exits -@keyframes tdExpandOut { - 0% { - opacity: 1; - transform: scale(1); - animation-timing-function: @easeOutCirc; - } - 100% { - opacity: 0; - transform: scale(1.2); - } -} - -@keyframes tdExpandOutBounce { - 0% { - opacity: 1; - transform: scale(1); - animation-timing-function: @easeOutCirc; - } - 30% { - opacity: 1; - transform: scale(0.95); - animation-timing-function: ease; - } - 100% { - opacity: 0; - transform: scale(1.2); - } -} - -.tdExpandOut() { - animation-name: tdExpandOut; -} -.tdExpandOutBounce() { - animation-name: tdExpandOutBounce; -} - - - - // Shrink Entrances @keyframes tdShrinkIn { 0% {