| body { |
| padding-top: 50px; |
| } |
| |
| .list-group-item.active > a { |
| color: white; |
| } |
| |
| /* ANIMATION */ |
| .animate-repeat{ |
| /*background: red;*/ |
| } |
| |
| .animate-repeat.ng-move, |
| .animate-repeat.ng-enter, |
| .animate-repeat.ng-leave { |
| transition:all linear 0.5s; |
| } |
| |
| /* Element Exit */ |
| .animate-repeat.ng-leave.ng-leave-active, |
| .animate-repeat.ng-move, |
| .animate-repeat.ng-enter { |
| /*opacity:0;*/ |
| animation:0.5s bounceOutRight ease; |
| } |
| |
| /* Element Enter */ |
| .animate-repeat.ng-leave, |
| .animate-repeat.ng-move.ng-move-active, |
| .animate-repeat.ng-enter.ng-enter-active { |
| /*opacity:1;*/ |
| animation:0.5s bounceInRight ease; |
| } |
| |
| @keyframes bounceInRight { |
| from, 60%, 75%, 90%, to { |
| animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
| } |
| |
| from { |
| opacity: 0; |
| transform: translate3d(3000px, 0, 0); |
| } |
| |
| 60% { |
| opacity: 1; |
| transform: translate3d(-25px, 0, 0); |
| } |
| |
| 75% { |
| transform: translate3d(10px, 0, 0); |
| } |
| |
| 90% { |
| transform: translate3d(-5px, 0, 0); |
| } |
| |
| to { |
| transform: none; |
| } |
| } |
| |
| @keyframes bounceOutRight { |
| 20% { |
| opacity: 1; |
| transform: translate3d(-20px, 0, 0); |
| } |
| |
| to { |
| opacity: 0; |
| transform: translate3d(2000px, 0, 0); |
| } |
| } |