CSS contentをアニメーション

Question

前提・実現したいこと

CSSのcontentをアニメーションさせたいのですが、該当のソースコードでは動きません
text1→text2→text1や→と文字を変えていきたいのですが、書き方が間違ってますでしょうか？

該当のソースコード

<style>
.text_change{
  animation:1s ease infinite alternate change_text;
}
@keyframes change_text{
  0%{ div.text_change:before {content: "text1" } }
  100%{ div.text_change:after {content: "text2" } }
}

</style>

<div class="text_change"></div>

Answer 1

こんにちは。

@keyframesの中にはセレクタは書けませんよ。
こんな形ではいかがですか？

.text:before{
  content:"";
  animation:1s ease infinite alternate change_text;
}
@keyframes change_text{
  0%{ content: "text1" }
  100%{ content: "text2" }
}