The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */
body{
font-size:100px
}
@keyframes lo {
from,to {font-size:1em; left: .5em; top:1.25em}
		60% {font-size:1em; left: .5em; top:1.25em}
		70% {font-size:2em; left: 0; top: 0.5em;}
        80% {font-size:1em; left: .5em; top:1.25em}
        90% {font-size:2em; left: 0; top: 0.5em;}
        100% {font-size:1em; left: .5em; top:1.25em}
}
#heart {
    position: relative;
    width: 1em;
    height: 0.9em;
    margin: auto;
    animation: lo 1.3s infinite;
}

#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 0.5em;
    top: 0;
    width: .5em;
    height: .8em;
    //background: linear-gradient(45deg, #f06, yellow);
    background: red;
    -moz-border-radius: .5em .5em 0 0;
    border-radius: .5em .5em 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

dabblet.html

<div id="heart"></div>

dabblet.js

// alert('Hello world!');

settings.json

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