Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<style>
  @keyframes anim {
    from { background-color: red; }
    50% { background-color: green; }
    to { background-color: yellow; }
  }
  #outer, #inner {
    background-color: black;
    position: fixed;
    width: 50px;
    height: 50px;
  }
  #outer {
    top: 0px;
    animation: anim 2s linear forwards;
    padding: 20px;
  }
  #inner {
    position: fixed;
    top: 100px;
  }
  #inner.t {
    transition: background-color 1s linear;
    background-color: inherit;
  }
</style>
<div id=outer>
  outer
  <div id=inner>
    inner
  </div>
</div>
<div style="position:fixed; left: 150px; top: 30px">Outer should animate: red -> green -> yellow. (Works everywhere).</div>
<div style="position:fixed; left: 150px; top: 100px;">
  Inner should stay black until 1s has elapsed, then transition to green, then finally snap to yellow.
  <ul>
    <li>Wrong: Stay black, then transition to yellow. (Chrome, Webkit [tested with Epiphany])</li>
    <li>Wrong: Stay black, then transition to red, then finally snap to yellow. (Firefox)</li>
  </ul>
</div>
<script>
  setTimeout(() => {
    inner.classList.add('t');
  }, 1000);
</script>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers