Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1>CSS animation on background-image</h1>
  <h2>linear-gradient()</h2>
  <div class="test">
    <div class="testcase lineargradient"></div>
    <ul>
      <li>Chrome: NOK (no anim)</li>
      <li>Opera: NOK (no anim)</li>
      <li>Firefox: NOK (no anim)</li>
      <li>IE: OK</li>
      <li>Edge: OK</li>
      <li>Safari: NOK (no anim, end state)</li>
    </ul>
  </div>
  <h2>radial-gradient()</h2>
  <div class="test">
    <div class="testcase radialgradient"></div>
    <ul>
      <li>Chrome: NOK (no anim)</li>
      <li>Opera: NOK (no anim)</li>
      <li>Firefox: NOK (no anim)</li>
      <li>IE: OK</li>
      <li>Edge: OK</li>
      <li>Safari: NOK (no anim, end state)</li>
    </ul>
  </div>
  <h2>url()</h2>
  <div class="test">
    <div class="testcase url"></div>
    <ul>
      <li>Chrome: OK</li>
      <li>Opera: OK</li>
      <li>Firefox: NOK (no anim)</li>
      <li>IE: NOK (black)</li>
      <li>Edge: NOK (black)</li>
      <li>Safari: OK</li>
    </ul>
  </div>
  <h2>url() with base64 SVG</h2>
  <div class="test">
    <div class="testcase svg"></div>
    <ul>
      <li>Chrome: OK</li>
      <li>Opera: OK</li>
      <li>Firefox: NOK (black)</li>
      <li>IE: NOK (black)</li>
      <li>Edge: NOK (black)</li>
      <li>Safari: OK</li>
    </ul>
  </div>
</body>
</html>
 
.testcase {
  flex: 0 0 auto;
  width: 200px;
  height: 200px;
  background: #000;
  animation: 1s infinite alternate;
}
.lineargradient {
  animation-name: lineargradient;
}
.radialgradient {
  animation-name: radialgradient;
}
.url {
  animation-name: url;
}
.svg {
  animation-name: svg;
}
​
​
@keyframes lineargradient {
 from {
   background-image: linear-gradient(red, green);
 }
 to {
   background-image: linear-gradient(blue, yellow);
 }
}
@keyframes radialgradient {
 from {
   background-image: radial-gradient(red, green);
 }
 to {
   background-image: radial-gradient(blue, yellow);
 }
}
@keyframes url {
 from {
   background-image: url(http://unsplash.it/200/200?image=52);
 }
 to {
   background-image: url(http://unsplash.it/200/200?image=56);
 }
}
@keyframes svg {
  from {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'><linearGradient id='gradient' gradientUnits='userSpaceOnUse' x2='0' y2='1'><stop offset='0%' stop-color='red'/><stop offset='100%' stop-color='green'/></linearGradient><rect fill='url(#gradient)' x='0' y='0' width='1' height='1'/></svg>");
  }
  to {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'><linearGradient id='gradient' gradientUnits='userSpaceOnUse' x2='0' y2='1'><stop offset='0%' stop-color='blue'/><stop offset='100%' stop-color='yellow'/></linearGradient><rect fill='url(#gradient)' x='0' y='0' width='1' height='1'/></svg>");
  }
}
​
​
​
​
​
​
​
/* css */
html {
  font: 1em sans-serif;
}
.test {
  display: flex;
  align-items: flex-start;
}
Output 300px

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

Dismiss x
public
Bin info
iamvdopro
0viewers