add @keyframes in in-line css instead of from a css file-CodePudding

how can one add @ keyframes in in-line css?

I have tried placing the keyframes in the style attribute but it did not work.

is there anyway by which this can be done ?

CodePudding user response：

No. since the animation is not declared in the element, it's only called upon it.

CodePudding user response：

You can use in-line css in keyframes just omit the to or 100% declaration from the @keyframe.

.progress-bar {
  border: 2px solid #53a2ed;
  border-radius: 14px;
}
.progress-bar > div { 
  color: white; 
  background: #53a2ed;
  overflow: hidden;
  white-space: nowrap; 
  padding: 10px 20px;
  border-radius: 10px;
  animation: progress-bar 2s;
}

@keyframes progress-bar {
   0% { width: 0; }
}

<div >
  <div style="width: 80%">80% complete</div>
</div>