CSS アニメーション

Question

前提・実現したいこと

div style=""に直接記述する形で、アニメーションさせる方法はありますでしょうか？
プログレスバーのようなものを作っています
width:0%から70%まで徐々に広げていきたいです

該当のソースコード

<div style="background-color:red;width:100%">
<div style="transition: 5s ;width:70%;background-color:blue">　</div>
</div>

Answer 1

@keyframesを使ってはいけないのでしょうか？

<style>
@keyframes myanime{
  0% {width:0%;}
  100% {width:70%;}
}
</style>
<div style="background-color:red;width:100%">
<div style="animation-duration: 3s;
animation-name: myanime;
width:70%;
height:50px;
background-color:blue"></div>
</div>

Comments

[prgr]

お返事ありがとうございます
もちろんkeyframes使ってもいいのですが、
<style>
@keyframes myanime{
0% {width:0%;}
100% {width:70%;}
}
</style>
この部分もstyle=""内で完結させる方法はありませんでしょうか？