XGHeaven/animation-diff-style.html

## animation-diff-style.html
<!DOCTYPE html>
<html>
  <head>
    <style>
      @keyframes a {
        from {
          color: red;
        }
        to {
          color: blue;
        }
      }

      @keyframes b {
        from {
          color: red;
        }
        to {
          color: blue;
        }
      }


    </style>
    <style>
      @keyframes c {
      from {
          color: red;
        }
        to {
          color: blue;
        }
    }
  </style>
  </head>
  <body>
    <div style="animation: 1s ease infinite both a">A</div>
    <div style="animation: 1s ease infinite both b">B</div>
    <div style="animation: 1s ease infinite both c">C</div>
  </body>
</html>

## animation-name-case.html
<!DOCTYPE html>
<html>
  <head>
    <style>
      @keyframes A {
        from {
          color: red;
        }
        to {
          color: blue;
        }
      }

      @keyframes B {
        from {
          color: red;
        }
        to {
          color: blue;
        }
      }


    </style>
    <style>
      @keyframes C {
      from {
          color: red;
        }
        to {
          color: blue;
        }
    }
  </style>
  </head>
  <body>
    <div style="animation: 1s ease infinite both A">A</div>
    <div style="animation: 1s ease infinite both B">B</div>
    <div style="animation: 1s ease infinite both C">C</div>
  </body>
</html>

## delete-style.html
<html>
  <head>
    <style>
      .bg {
        background: red;
      }
      .bgcolor {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="bg" class="bg">(background) Background should change green to red after 5s.</div>
    <div id="bgcolor" class="bgcolor">(background-color) Background should change green to red after 5s.</div>
    <script>
      let jsbg
      setTimeout(() => {
        jsbg = document.createElement('div')
        jsbg.className = 'bg'
        jsbg.style.background = 'green'
        jsbg.appendChild(document.createTextNode('(background created by js) Background should change green to red after 5s.'))
        document.body.appendChild(jsbg)

        document.querySelector('#bg').style.background = 'green'
        document.querySelector('#bgcolor').style.backgroundColor = 'green'
      })
      setTimeout(() => {
        jsbg.style.background = ''
        document.querySelector('#bg').style.background = ''
        document.querySelector('#bgcolor').style.backgroundColor = ''
      }, 5000)

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	@keyframes a {
	from {
	color: red;
	}
	to {
	color: blue;
	}
	}

	@keyframes b {
	from {
	color: red;
	}
	to {
	color: blue;
	}
	}


	</style>
	<style>
	@keyframes c {
	from {
	color: red;
	}
	to {
	color: blue;
	}
	}
	</style>
	</head>
	<body>
	<div style="animation: 1s ease infinite both a">A</div>
	<div style="animation: 1s ease infinite both b">B</div>
	<div style="animation: 1s ease infinite both c">C</div>
	</body>
	</html>