Untitled

dabblet.css

div {
    background-color: #ccc;
    margin: 20px;
    width: 50px;
    height: 50px;

    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
}

#with-opacity {
  -webkit-animation-name: popInWithOpacity;
}

#without-opacity {
  -webkit-animation-name: popInWithoutOpacity;
}       

@-webkit-keyframes popInWithOpacity {
  from {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes popInWithoutOpacity {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

dabblet.html

<div id=with-opacity></div>
<div id=without-opacity></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}