CSS 直書きでアニメーションの一部を変更

Question

前提・実現したいこと

CSSアニメーションで、画像3つに影をつけました
画像3つの色をそれぞれ【直書き】で変える手法はありませんでしょうか？
一つ目の画像の影の色:赤
二つ目の画像の影の色:緑
三つ目の画像の影の色:青
にしたいと考えております

該当のソースコード

<style>
.test{
animation:1s ease infinite alternate test_;
}
@keyframes test_{
0%{box-shadow:0px 0px 0px red;}
100%{box-shadow:10px 10px 10px red;}
}
</style>

<img class="test" src="https://misosio.com/wp-content/uploads/photo-gallery/hituwa03.png" style="box-shadow:10px 10px 10px red;width:50px;height:50px">
<img class="test" src="https://misosio.com/wp-content/uploads/photo-gallery/hituwa03.png" style="box-shadow:10px 10px 10px green;width:50px;height:50px">
<img class="test" src="https://misosio.com/wp-content/uploads/photo-gallery/hituwa03.png" style="box-shadow:10px 10px 10px blue;width:50px;height:50px">

Answer 1

【直書き】というのがインライン（要素のタグ内）に記述するという意味なら、

<style>
.test{
animation:1s ease infinite alternate test_;
}
@keyframes test_{
0%{box-shadow:0px 0px 0px;} /* ここでは色は指定しない */
100%{box-shadow:10px 10px 10px;}
}
</style>
<img class="test" src="https://misosio.com/wp-content/uploads/photo-gallery/hituwa03.png" style="box-shadow:10px 10px 10px;color:red;width:50px;height:50px">
<img class="test" src="https://misosio.com/wp-content/uploads/photo-gallery/hituwa03.png" style="box-shadow:10px 10px 10px;color:green;width:50px;height:50px">
<img class="test" src="https://misosio.com/wp-content/uploads/photo-gallery/hituwa03.png" style="box-shadow:10px 10px 10px;color:blue;width:50px;height:50px">

box-shadow で色の指定を省略すると、color で指定した色になります。

box-shadow - CSS: カスケーディングスタイルシート | MDN
<color>

可能なキーワード及び記述方法については <color> の値をご覧ください。
値が指定されていない場合は、既定で currentcolor になります。

currentcolor は要素のcolorプロパティの値になります。