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

Time:10-27

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;
}
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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.

CodePudding user response:

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&amp;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;" }>           
  •  Tags:  
  • css
  • Related