<div id="locked">
  <img src="https://i.imgflip.com/kc1rc.jpg?a416856" />
  <aside>
    <p>
    <strong>Hate my background color?</strong>
    Try changing it in your <del>favorite</del> Chrome* DevTools. MWUAHAHAHAHA.
    </p>
    <p><small>* Firefox cascades differently, and Edge/Safari don't support Web Animations yet (see comments).</small></p>
  </aside>
</div>
html,body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  color: #fff;
  width: 50vw;
  height: 50vh;
  padding: 1em;
  display: flex;
}

img {
  height: 100%;
}

aside {
  margin-left: 1em;
}

#locked {
  background-color: hotpink;
}
locked.animate([
  { background: 'hotpink' },
  { background: 'hotpink' }
], {
  duration: 0,
  fill: 'both'
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.