Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | /*** |
| 2 | AngularJS Basic Animations |
||
| 3 | ***/ |
||
| 4 | |||
| 5 | @-webkit-keyframes fadeInUp { |
||
| 6 | 0% { |
||
| 7 | opacity: 0; |
||
| 8 | -webkit-transform: translateY(15px); |
||
| 9 | } |
||
| 10 | 100% { |
||
| 11 | opacity: 1; |
||
| 12 | -webkit-transform: translateY(0); |
||
| 13 | } |
||
| 14 | } |
||
| 15 | |||
| 16 | @-moz-keyframes fadeInUp { |
||
| 17 | 0% { |
||
| 18 | opacity: 0; |
||
| 19 | -moz-transform: translateY(15px); |
||
| 20 | } |
||
| 21 | 100% { |
||
| 22 | opacity: 1; |
||
| 23 | -moz-transform: translateY(0); |
||
| 24 | } |
||
| 25 | } |
||
| 26 | |||
| 27 | @-o-keyframes fadeInUp { |
||
| 28 | 0% { |
||
| 29 | opacity: 0; |
||
| 30 | -o-transform: translateY(15px); |
||
| 31 | } |
||
| 32 | 100% { |
||
| 33 | opacity: 1; |
||
| 34 | -o-transform: translateY(0); |
||
| 35 | } |
||
| 36 | } |
||
| 37 | |||
| 38 | @keyframes fadeInUp { |
||
| 39 | 0% { |
||
| 40 | opacity: 0; |
||
| 41 | transform: translateY(15px); |
||
| 42 | } |
||
| 43 | 100% { |
||
| 44 | opacity: 1; |
||
| 45 | transform: translateY(0); |
||
| 46 | } |
||
| 47 | } |
||
| 48 | |||
| 49 | .fade-in-up { |
||
| 50 | -webkit-animation: fadeInUp .5s; |
||
| 51 | animation: fadeInUp .5s; |
||
| 52 | } |
||
| 53 | |||
| 54 | @-webkit-keyframes bounceDelay { |
||
| 55 | 0%, 80%, 100% { -webkit-transform: scale(0.0) } |
||
| 56 | 40% { -webkit-transform: scale(1.0) } |
||
| 57 | } |
||
| 58 | |||
| 59 | @keyframes bounceDelay { |
||
| 60 | 0%, 80%, 100% { |
||
| 61 | transform: scale(0.0); |
||
| 62 | -webkit-transform: scale(0.0); |
||
| 63 | } |
||
| 64 | |||
| 65 | 40% { |
||
| 66 | transform: scale(1.0); |
||
| 67 | -webkit-transform: scale(1.0); |
||
| 68 | } |
||
| 69 | } |
||
| 70 | |||
| 71 | // Material Design Animations |
||
| 72 | |||
| 73 | // main: _material.scss |
||
| 74 | |||
| 75 | @keyframes input-focus { |
||
| 76 | 0% { |
||
| 77 | left: 20%; |
||
| 78 | width: 20%; |
||
| 79 | } |
||
| 80 | 99% { |
||
| 81 | width: 0; |
||
| 82 | left: 0; |
||
| 83 | opacity: 1; |
||
| 84 | } |
||
| 85 | 100% { |
||
| 86 | opacity: 0; |
||
| 87 | } |
||
| 88 | } |