First, create the keyframes behavior

dabblet.css

/* First, create the keyframes behavior */

@-webkit-keyframes bk_move {
	 0% { background-position: 10px}
    100% { background-position: 0 0 }
}
@-moz-keyframes bk_move {
	 0% { background-position: 10px }
    100% { background-position: 0 0 }
    }
    
@-ms-keyframes bk_move {
 0% { background-position: 0px  }
    100% { background-position: 0 0 }
}


/* Then apply your animation to the element */
#fav {
    display: inline-block;
    height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    background-image: -webkit-linear-gradient(        -45deg,        rgba(255, 154, 26, 1) 25%,        transparent 25%,        transparent 50%,        rgba(255, 154, 26, 1) 50%,        rgba(255, 154, 26, 1) 75%,        transparent 75%,        transparent    );
    background-image: -moz-linear-gradient(        -45deg,        rgba(255, 154, 26, 1) 25%,        transparent 25%,        transparent 50%,        rgba(255, 154, 26, 1) 50%,        rgba(255, 154, 26, 1) 75%,        transparent 75%,        transparent    );
    background-image: -ms-linear-gradient(        -45deg,        rgba(255, 154, 26, 1) 25%,        transparent 25%,        transparent 50%,        rgba(255, 154, 26, 1) 50%,        rgba(255, 154, 26, 1) 75%,        transparent 75%,        transparent    );
    background-image: linear-gradient(        -45deg,        rgba(255, 154, 26, 1) 25%,        transparent 25%,        transparent 50%,        rgba(255, 154, 26, 1) 50%,        rgba(255, 154, 26, 1) 75%,        transparent 75%,        transparent    );
    /*background-size*/
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    -o-background-size: 50px 50px;
    background-size: 50px 50px;
    /*animation*/
    -webkit-animation: bk_move 50s linear infinite;
    -moz-animation: bk_move 2s linear infinite;
    -ms-animation: bk_move 2s linear infinite;
    -o-animation: bk_move 2s linear infinite;
    animation: bk_move 2s linear infinite;
    overflow: hidden;
}


body {
	font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
	font-size: 13px;
	width:100%;
	height:100%;
}

#fav {
	display:none;
	position:absolute;
	top:0;
	left:0; 
	    background:rgba(0,0,0,0.5);
	background-size: 30px 30px;

background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
-pie-background: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                 transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                 transparent 75%, transparent) 0 0 / 50px 50px #ac0;
width:100%;
height:100%;
} 

#fav:target{display:block}

dabblet.html

<button><a href="#fav">Clik me !</a> </button>
<div id="fav"></div>
<p>Hello World</p>

settings.json

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