I have a query as to how to use the animate parameters in a css sheet

user_17222213 0
Viewed 37

Very recently, I looked at a code on developer options. I wasn't quite sure as to how the below parameters are being used. I took this code from http://divyaaquariumandpets.com/ website

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

The above mentioned animation parameters are at the start of the animate.css sheet. are they classes? if no then how are they being used. If it has been declared at the start of the css page, then is it for the entire css sheet. I have seen coders declaring animation-duration inside the class they are referring to. This is quite confusing.

css
1 Answers

Well, here's an example:

@import url('https://fonts.googleapis.com/css?family=Cinzel:300,400,500,600,700|Muli:200,300,400,500,600|Oswald:200,300,400,500,600&subset=latin-ext');
@keyframes anim-text-flow-keys {
  0% { color: rgba(255, 152, 0, 1); opacity: 0.998 }
  4% { color: rgba(255, 161, 2, 1); opacity: 0.996 }
  6% { color: rgba(255, 170, 3, 1); opacity: 0.994 }
  8% { color: rgba(255, 179, 5, 1); opacity: 0.992 }
  10% { color: rgba(255, 187, 6, 1); opacity: 0.99 }
  12% { color: rgba(255, 170, 6, 1); opacity: 0.988 }
  14% { color: rgba(255, 128, 5, 1); opacity: 0.986 }
  16% { color: rgba(255, 86, 3, 1); opacity: 0.984 }
  18% { color: rgba(255, 45, 2, 1); opacity: 0.982 }
  20% { color: rgba(255, 5, 0, 1); opacity: 0.98 }
  22% { color: rgba(255, 40, 0, 1); opacity: 0.978 }
  24% { color: rgba(255, 76, 0, 1); opacity: 0.976 }
  26% { color: rgba(255, 111, 0, 1); opacity: 0.974 }
  28% { color: rgba(255, 147, 0, 1); opacity: 0.972 }
  30% { color: rgba(224, 161, 13, 1); opacity: 0.97 }
  32% { color: rgba(179, 156, 32, 1); opacity: 0.968 }
  34% { color: rgba(134, 150, 50, 1); opacity: 0.966 }
  36% { color: rgba(89, 144, 69, 1); opacity: 0.964 }
  38% { color: rgba(43, 145, 96, 1); opacity: 0.962 }
  40% { color: rgba(34, 170, 132, 1); opacity: 0.96 }
  42% { color: rgba(24, 195, 169, 1); opacity: 0.958 }
  44% { color: rgba(14, 220, 205, 1); opacity: 0.956 }
  46% { color: rgba(4, 245, 241, 1); opacity: 0.954 }
  48% { color: rgba(24, 246, 251, 1); opacity: 0.952 }
  50% { color: rgba(53, 236, 247, 1); opacity: 0.9500000000000001 }
  52% { color: rgba(82, 225, 243, 1); opacity: 0.9520000000000001 }
  54% { color: rgba(111, 215, 239, 1); opacity: 0.9540000000000001 }
  56% { color: rgba(124, 189, 237, 1); opacity: 0.9560000000000001 }
  58% { color: rgba(95, 145, 241, 1); opacity: 0.9580000000000001 }
  60% { color: rgba(66, 100, 245, 1); opacity: 0.96 }
  62% { color: rgba(37, 56, 250, 1); opacity: 0.962 }
  64% { color: rgba(7, 11, 254, 1); opacity: 0.964 }
  66% { color: rgba(0, 0, 229, 1); opacity: 0.966 }
  68% { color: rgba(0, 0, 202, 1); opacity: 0.968 }
  70% { color: rgba(0, 0, 174, 1); opacity: 0.97 }
  72% { color: rgba(0, 0, 147, 1); opacity: 0.972 }
  74% { color: rgba(19, 24, 139, 1); opacity: 0.974 }
  76% { color: rgba(56, 70, 161, 1); opacity: 0.976 }
  78% { color: rgba(94, 117, 183, 1); opacity: 0.978 }
  80% { color: rgba(131, 163, 205, 1); opacity: 0.98 }
  82% { color: rgba(168, 210, 227, 1); opacity: 0.982 }
  84% { color: rgba(192, 225, 177, 1); opacity: 0.984 }
  86% { color: rgba(210, 233, 127, 1); opacity: 0.986 }
  88% { color: rgba(227, 242, 78, 1); opacity: 0.988 }
  90% { color: rgba(245, 250, 28, 1); opacity: 0.99 }
  92% { color: rgba(255, 241, 0, 1); opacity: 0.992 }
  94% { color: rgba(255, 219, 0, 1); opacity: 0.994 }
  96% { color: rgba(255, 196, 0, 1); opacity: 0.996 }
  98% { color: rgba(255, 174, 0, 1); opacity: 0.998 }
  100% { color: rgba(255, 152, 0, 1); opacity: 1 }
}
@keyframes fadein {
  from { opacity: 0 }
  to { opacity: 1 }
}
h3 { font-family: "Muli", sans serif; font-weight: 200 }
code { font-family: "Oswald", sans serif; }
<h3>This is how animations are created & used in <code><strong>CSS3</strong></code>:</h3>
<div>
  <p style="animation: anim-text-flow-keys 30s infinite linear; text-align: center; font-size: 2rem; font-family: Cinzel, serif; letter-spacing: 3px;" }>...Animated 
  <span style="animation: fadein 10s ease-in; text-align: center; font-size: 2rem;" }>
  </span> Effects... 
  </p>
</div>

user_67146270
Related