CSSのみでのループ再生．アニメーション

Question

前提・実現したいこと

background-size: 10px 10px;

このサイズ(10px 10px)を10秒間の間で(1px 1px - 10px 10px)でループさせたいです．

ここに言語名を入力
ソースコード
CSS

試したこと

色々調べたが無理でした．おねがいします

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[miyabi_pudding]

> 色々調べたが無理でした

どんな検索キーワードで調べたのでしょうか？

Answer 1

こんにちは。

普通にできましたが……
サンプル

div{
  width: 10px;
  height: 10px;
  background: url(http://placehold.jp/24/cc9999/993333/10x10.png?text=);
  background-size: 1px 1px;
  background-repeat: no-repeat;
  animation: 10s test alternate infinite;
}

@keyframes test{
  to{
    background-size: 10px 10px; 
  }
}

Comments

[blue_denim]

ありがとうございます．できました．
サンプルまでわざわざすいません．
素早く回答非常に助かりました