内容は、■の大きさと色を変化させる、というものです。
１．pタグを生成して<body>内に配置する
２．@keyframesを記述して、<style>内に配置する
３. pタグに■を記述し、@keyframesと関連づける
<script>
window.onload=function(){
// <body>要素を取得し、<p>タグを生成し、<body>内に配置する
let body=document.getElementById('body');
let ptag=document.createElement('p');
body.insertBefore(ptag,null);
// @keyframesでアニメーションを記述
let scale='@keyframes scale{ 0% {font-size:1px ;color:rgba(255,255, 0,0.5)}'+
'50% {font-size:30px ;color:rgba(255,100,255,0.5)}'+
'100%{font-size:1px ;color:rgba(255,255, 0,0.5)}';
// <style>タグを取得し、<style>内に@keyframesを配置
// <p>タグに■を設置し、<p>の style でアニメーションを関連づける
let css =document.getElementById('css');
css.insertAdjacentHTML('afterbegin',scale);
ptag.textContent='■';
ptag.setAttribute('style','animation:scale 5s infinite ease-in-out');
}
</script>
<style id='css' ></style>
<body id='body'></body>
javascript も css も殆ど使わないので、コードの出来は分かりません。