/** * angular-motion * @version v0.3.2 - 2014-02-11 * @link https://github.com/mgcrea/angular-motion * @author Olivier Louvignes * @license MIT License, http://www.opensource.org/licenses/MIT */ .am-fade-and-scale { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } .am-fade-and-scale.ng-enter, .am-fade-and-scale.am-fade-and-scale-add, .am-fade-and-scale.ng-hide-remove, .am-fade-and-scale.ng-move { -webkit-animation-name: fadeAndScaleIn; animation-name: fadeAndScaleIn; } .am-fade-and-scale.ng-leave, .am-fade-and-scale.am-fade-and-scale-remove, .am-fade-and-scale.ng-hide { -webkit-animation-name: fadeAndScaleOut; animation-name: fadeAndScaleOut; } .am-fade-and-scale.ng-enter { visibility: hidden; -webkit-animation-name: fadeAndScaleIn; animation-name: fadeAndScaleIn; } .am-fade-and-scale.ng-enter.ng-enter-active { visibility: visible; } .am-fade-and-scale.ng-leave { -webkit-animation-name: fadeAndScaleOut; animation-name: fadeAndScaleOut; } @-webkit-keyframes fadeAndScaleIn { from { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); } to { opacity: 1; } } @keyframes fadeAndScaleIn { from { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); } to { opacity: 1; } } @-webkit-keyframes fadeAndScaleOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); } } @keyframes fadeAndScaleOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); } } .am-fade-and-slide-top { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } .am-fade-and-slide-top.am-fade-and-slide-top-add, .am-fade-and-slide-top.ng-hide-remove, .am-fade-and-slide-top.ng-move { -webkit-animation-name: fadeAndSlideFromTop; animation-name: fadeAndSlideFromTop; } .am-fade-and-slide-top.am-fade-and-slide-top-remove, .am-fade-and-slide-top.ng-hide { -webkit-animation-name: fadeAndSlideToTop; animation-name: fadeAndSlideToTop; } .am-fade-and-slide-top.ng-enter { visibility: hidden; -webkit-animation-name: fadeAndSlideFromTop; animation-name: fadeAndSlideFromTop; } .am-fade-and-slide-top.ng-enter.ng-enter-active { visibility: visible; } .am-fade-and-slide-top.ng-leave { -webkit-animation-name: fadeAndSlideToTop; animation-name: fadeAndSlideToTop; } .am-fade-and-slide-right { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } .am-fade-and-slide-right.am-fade-and-slide-right-add, .am-fade-and-slide-right.ng-hide-remove, .am-fade-and-slide-right.ng-move { -webkit-animation-name: fadeAndSlideFromRight; animation-name: fadeAndSlideFromRight; } .am-fade-and-slide-right.am-fade-and-slide-right-remove, .am-fade-and-slide-right.ng-hide { -webkit-animation-name: fadeAndSlideToRight; animation-name: fadeAndSlideToRight; } .am-fade-and-slide-right.ng-enter { visibility: hidden; -webkit-animation-name: fadeAndSlideFromRight; animation-name: fadeAndSlideFromRight; } .am-fade-and-slide-right.ng-enter.ng-enter-active { visibility: visible; } .am-fade-and-slide-right.ng-leave { -webkit-animation-name: fadeAndSlideToRight; animation-name: fadeAndSlideToRight; } .am-fade-and-slide-bottom { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } .am-fade-and-slide-bottom.am-fade-and-slide-bottom-add, .am-fade-and-slide-bottom.ng-hide-remove, .am-fade-and-slide-bottom.ng-move { -webkit-animation-name: fadeAndSlideFromBottom; animation-name: fadeAndSlideFromBottom; } .am-fade-and-slide-bottom.am-fade-and-slide-bottom-remove, .am-fade-and-slide-bottom.ng-hide { -webkit-animation-name: fadeAndSlideToBottom; animation-name: fadeAndSlideToBottom; } .am-fade-and-slide-bottom.ng-enter { visibility: hidden; -webkit-animation-name: fadeAndSlideFromBottom; animation-name: fadeAndSlideFromBottom; } .am-fade-and-slide-bottom.ng-enter.ng-enter-active { visibility: visible; } .am-fade-and-slide-bottom.ng-leave { -webkit-animation-name: fadeAndSlideToBottom; animation-name: fadeAndSlideToBottom; } .am-fade-and-slide-left { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } .am-fade-and-slide-left.am-fade-and-slide-left-add, .am-fade-and-slide-left.ng-hide-remove, .am-fade-and-slide-left.ng-move { -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-name: fadeAndSlideFromLeft; animation-name: fadeAndSlideFromLeft; } .am-fade-and-slide-left.am-fade-and-slide-left-remove, .am-fade-and-slide-left.ng-hide { -webkit-animation-name: fadeAndSlideToLeft; animation-name: fadeAndSlideToLeft; } .am-fade-and-slide-left.ng-enter { visibility: hidden; -webkit-animation-name: fadeAndSlideFromLeft; animation-name: fadeAndSlideFromLeft; } .am-fade-and-slide-left.ng-enter.ng-enter-active { visibility: visible; } .am-fade-and-slide-left.ng-leave { -webkit-animation-name: fadeAndSlideToLeft; animation-name: fadeAndSlideToLeft; } @-webkit-keyframes fadeAndSlideFromTop { from { opacity: 0; -webkit-transform: translateY(-20%); transform: translateY(-20%); } to { opacity: 1; } } @keyframes fadeAndSlideFromTop { from { opacity: 0; -webkit-transform: translateY(-20%); transform: translateY(-20%); } to { opacity: 1; } } @-webkit-keyframes fadeAndSlideToTop { from { opacity: 1; } to { opacity: 0; -webkit-transform: translateY(-20%); transform: translateY(-20%); } } @keyframes fadeAndSlideToTop { from { opacity: 1; } to { opacity: 0; -webkit-transform: translateY(-20%); transform: translateY(-20%); } } @-webkit-keyframes fadeAndSlideFromRight { from { opacity: 0; -webkit-transform: translateX(20%); transform: translateX(20%); } to { opacity: 1; } } @keyframes fadeAndSlideFromRight { from { opacity: 0; -webkit-transform: translateX(20%); transform: translateX(20%); } to { opacity: 1; } } @-webkit-keyframes fadeAndSlideToRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translateX(20%); transform: translateX(20%); } } @keyframes fadeAndSlideToRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translateX(20%); transform: translateX(20%); } } @-webkit-keyframes fadeAndSlideFromBottom { from { opacity: 0; -webkit-transform: translateY(20%); transform: translateY(20%); } to { opacity: 1; } } @keyframes fadeAndSlideFromBottom { from { opacity: 0; -webkit-transform: translateY(20%); transform: translateY(20%); } to { opacity: 1; } } @-webkit-keyframes fadeAndSlideToBottom { from { opacity: 1; } to { opacity: 0; -webkit-transform: translateY(20%); transform: translateY(20%); } } @keyframes fadeAndSlideToBottom { from { opacity: 1; } to { opacity: 0; -webkit-transform: translateY(20%); transform: translateY(20%); } } @-webkit-keyframes fadeAndSlideFromLeft { from { opacity: 0; -webkit-transform: translateX(-20%); transform: translateX(-20%); } to { opacity: 1; } } @keyframes fadeAndSlideFromLeft { from { opacity: 0; -webkit-transform: translateX(-20%); transform: translateX(-20%); } to { opacity: 1; } } @-webkit-keyframes fadeAndSlideToLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translateX(-20%); transform: translateX(-20%); } } @keyframes fadeAndSlideToLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translateX(-20%); transform: translateX(-20%); } } .am-fade { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; opacity: 1; } .am-fade.am-fade-add, .am-fade.ng-hide-remove, .am-fade.ng-move { -webkit-animation-name: fadeIn; animation-name: fadeIn; } .am-fade.am-fade-remove, .am-fade.ng-hide { -webkit-animation-name: fadeOut; animation-name: fadeOut; } .am-fade.ng-enter { visibility: hidden; -webkit-animation-name: fadeIn; animation-name: fadeIn; } .am-fade.ng-enter.ng-enter-active { visibility: visible; } .am-fade.ng-leave { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .modal-backdrop.am-fade, .aside-backdrop.am-fade { background: rgba(0, 0, 0, 0.5); -webkit-animation-duration: 0.15s; animation-duration: 0.15s; } .am-flip-x { -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } .am-flip-x.am-flip-x-add, .am-flip-x.ng-hide-remove, .am-flip-x.ng-move { -webkit-animation-name: flipInXBounce; animation-name: flipInXBounce; } .am-flip-x.am-flip-x-remove, .am-flip-x.ng-hide { -webkit-animation-name: flipOutX; animation-name: flipOutX; } .am-flip-x.ng-enter { visibility: hidden; -webkit-animation-name: flipInXBounce; animation-name: flipInXBounce; } .am-flip-x.ng-enter.ng-enter-active { visibility: visible; } .am-flip-x.ng-leave { -webkit-animation-name: flipOutX; animation-name: flipOutX; } .am-flip-x-linear { -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } .am-flip-x-linear.am-flip-x-add, .am-flip-x-linear.ng-hide-remove, .am-flip-x-linear.ng-move { -webkit-animation-name: flipInX; animation-name: flipInX; } .am-flip-x-linear.am-flip-x-remove, .am-flip-x-linear.ng-hide { -webkit-animation-name: flipOutX; animation-name: flipOutX; } .am-flip-x-linear.ng-enter { visibility: hidden; -webkit-animation-name: flipInX; animation-name: flipInX; } .am-flip-x-linear.ng-enter.ng-enter-active { visibility: visible; } .am-flip-x-linear.ng-leave { -webkit-animation-name: flipOutX; animation-name: flipOutX; } @-webkit-keyframes flipInX { from { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); } to { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); } } @keyframes flipInX { from { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); } to { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); } } @-webkit-keyframes flipInXBounce { from { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } to { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); } } @keyframes flipInXBounce { from { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } to { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); } } @-webkit-keyframes flipOutX { from { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); } to { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); } } @keyframes flipOutX { from { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); } to { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); } } .am-slide-top { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } .am-slide-top.am-fade-and-slide-top-add, .am-slide-top.ng-hide-remove, .am-slide-top.ng-move { -webkit-animation-name: slideFromTop; animation-name: slideFromTop; } .am-slide-top.am-fade-and-slide-top-remove, .am-slide-top.ng-hide { -webkit-animation-name: slideToTop; animation-name: slideToTop; } .am-slide-top.ng-enter { visibility: hidden; -webkit-animation-name: slideFromTop; animation-name: slideFromTop; } .am-slide-top.ng-enter.ng-enter-active { visibility: visible; } .am-slide-top.ng-leave { -webkit-animation-name: slideToTop; animation-name: slideToTop; } .am-slide-right { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } .am-slide-right.am-fade-and-slide-right-add, .am-slide-right.ng-hide-remove, .am-slide-right.ng-move { -webkit-animation-name: slideFromRight; animation-name: slideFromRight; } .am-slide-right.am-fade-and-slide-right-remove, .am-slide-right.ng-hide { -webkit-animation-name: slideToRight; animation-name: slideToRight; } .am-slide-right.ng-enter { visibility: hidden; -webkit-animation-name: slideFromRight; animation-name: slideFromRight; } .am-slide-right.ng-enter.ng-enter-active { visibility: visible; } .am-slide-right.ng-leave { -webkit-animation-name: slideToRight; animation-name: slideToRight; } .am-slide-bottom { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } .am-slide-bottom.am-fade-and-slide-bottom-add, .am-slide-bottom.ng-hide-remove, .am-slide-bottom.ng-move { -webkit-animation-name: slideFromBottom; animation-name: slideFromBottom; } .am-slide-bottom.am-fade-and-slide-bottom-remove, .am-slide-bottom.ng-hide { -webkit-animation-name: slideToBottom; animation-name: slideToBottom; } .am-slide-bottom.ng-enter { visibility: hidden; -webkit-animation-name: slideFromBottom; animation-name: slideFromBottom; } .am-slide-bottom.ng-enter.ng-enter-active { visibility: visible; } .am-slide-bottom.ng-leave { -webkit-animation-name: slideToBottom; animation-name: slideToBottom; } .am-slide-left { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } .am-slide-left.am-fade-and-slide-left-add, .am-slide-left.ng-hide-remove, .am-slide-left.ng-move { -webkit-animation-name: slideFromLeft; animation-name: slideFromLeft; } .am-slide-left.am-fade-and-slide-left-remove, .am-slide-left.ng-hide { -webkit-animation-name: slideToLeft; animation-name: slideToLeft; } .am-slide-left.ng-enter { visibility: hidden; -webkit-animation-name: slideFromLeft; animation-name: slideFromLeft; } .am-slide-left.ng-enter.ng-enter-active { visibility: visible; } .am-slide-left.ng-leave { -webkit-animation-name: slideToLeft; animation-name: slideToLeft; } @-webkit-keyframes slideFromTop { from { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes slideFromTop { from { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes slideToTop { to { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes slideToTop { to { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes slideFromRight { from { -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes slideFromRight { from { -webkit-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes slideToRight { to { -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes slideToRight { to { -webkit-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes slideFromBottom { from { -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes slideFromBottom { from { -webkit-transform: translateY(100%); transform: translateY(100%); } } @-webkit-keyframes slideToBottom { to { -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes slideToBottom { to { -webkit-transform: translateY(100%); transform: translateY(100%); } } @-webkit-keyframes slideFromLeft { from { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slideFromLeft { from { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes slideToLeft { to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slideToLeft { to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }