These should animate out of visiblity as the color changes (and then pop out of existence as the width/height goes to initial).

<div>CSS Animation</div>
<div style="height: 100px;"><div id="x"></div></div>

<!-- Spacer -->
<div style="height: 100px;"></div>

<div>Web Animation</div>
<div style="height: 100px;"><div id="y"></div></div>


<style id="jsbin-css">
#x {
    width: 100px;
    height: 100px;
	background-color: green;
	animation: x 3s infinite alternate;
}

#y {
    width: 100px;
    height: 100px;
	background-color: green;
}

@keyframes x {
	to {
		all: initial;
	}
}
</style>
<script>
const anim = y.animate(
  [ { all: 'initial', offset: 1 } ],
  { duration: 3000, direction: 'alternate', iterations: Infinity}
);
</script>
<script src="https://static.jsbin.com/js/render/edit.js?4.1.8"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"https://static.jsbin.com","root":"https://jsbin.com"});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-1656750-34', 'auto');
ga('require', 'linkid', 'linkid.js');
ga('require', 'displayfeatures');
ga('send', 'pageview');

</script>