POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/css/animations.css

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * ONAP Policy Engine
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 @-webkit-keyframes fadeIn {
  22   0% {
  23     opacity: 0;
  24   }
  25
  26   100% {
  27     opacity: 1;
  28   };
  29 }
  30
  31 @keyframes fadeIn {
  32   0% {
  33     opacity: 0;
  34   }
  35
  36   100% {
  37     opacity: 1;
  38   };
  39 }
  40
  41 @-webkit-keyframes fadeInDown {
  42   0% {
  43     opacity: 0;
  44     -webkit-transform: translate3d(0, -100%, 0);
  45     transform: translate3d(0, -100%, 0);
  46   }
  47
  48   100% {
  49     opacity: 1;
  50     -webkit-transform: none;
  51     transform: none;
  52   };
  53 }
  54
  55 @keyframes fadeInDown {
  56   0% {
  57     opacity: 0;
  58     -webkit-transform: translate3d(0, -100%, 0);
  59     transform: translate3d(0, -100%, 0);
  60   }
  61
  62   100% {
  63     opacity: 1;
  64     -webkit-transform: none;
  65     transform: none;
  66   };
  67 }
  68
  69 @keyframes rotate {
  70   100% {
  71     transform: rotate(360deg);
  72   };
  73 }
  74
  75 @-webkit-keyframes rotate {
  76   100% {
  77     -webkit-transform: rotate(360deg);
  78   };
  79 }
  80
  81 @keyframes colors {
  82   0% {
  83     stroke: #4285F4;
  84   }
  85
  86   25% {
  87     stroke: #DE3E35;
  88   }
  89
  90   50% {
  91     stroke: #F7C223;
  92   }
  93
  94   75% {
  95     stroke: #1B9A59;
  96   }
  97
  98   100% {
  99     stroke: #4285F4;
 100   };
 101 }
 102
 103 @keyframes dash {
 104   0% {
 105     stroke-dasharray: 1,150;
 106     stroke-dashoffset: 0;
 107     stroke: red;
 108   }
 109
 110   50% {
 111     stroke-dasharray: 90,150;
 112     stroke-dashoffset: -35;
 113     stroke: yellow;
 114   }
 115
 116   100% {
 117     stroke-dasharray: 90,150;
 118     stroke-dashoffset: -124;
 119     stroke: green;
 120   };
 121 }
 122
 123 @-webkit-keyframes dash {
 124   0% {
 125     stroke-dasharray: 1,150;
 126     stroke-dashoffset: 0;
 127   }
 128
 129   50% {
 130     stroke-dasharray: 90,150;
 131     stroke-dashoffset: -35;
 132   }
 133
 134   100% {
 135     stroke-dasharray: 90,150;
 136     stroke-dashoffset: -124;
 137   };
 138 }
 139
 140 .animated {
 141   -webkit-animation-duration: .7s;
 142   animation-duration: .7s;
 143   -webkit-animation-fill-mode: both;
 144   animation-fill-mode: both;
 145 }
 146
 147 .modal.animated,
 148 .animated.fast {
 149   -webkit-animation-duration: .2s;
 150   animation-duration: .2s;
 151 }
 152
 153 .animated.slow {
 154   -webkit-animation-duration: 1.1s;
 155   animation-duration: 1.1s;
 156 }
 157
 158 .animated.fadeInDown {
 159   -webkit-animation-name: fadeInDown;
 160   animation-name: fadeInDown;
 161 }
 162
 163 .animated.fadeIn {
 164   -webkit-animation-name: fadeIn;
 165   animation-name: fadeIn;
 166 }
 167
 168 .spinner-container {
 169   -webkit-animation: rotate 2s linear infinite;
 170   animation: rotate 2s linear infinite;
 171   z-index: 2;
 172   width: 65px;
 173   height: 65px;
 174 }
 175
 176 .spinner-container .path {
 177   stroke-dasharray: 1,150;
 178   stroke-dashoffset: 0;
 179   stroke: #2196F3;
 180   stroke-linecap: round;
 181   -webkit-animation: dash 1.5s ease-in-out infinite, colors 5.6s ease-in-out infinite;
 182   animation: dash 1.5s ease-in-out infinite, colors 5.6s ease-in-out infinite;
 183 }