Sample touch animations

dabblet.css

/**
 * Sample touch animations
 */

html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

.js__touch-point {
text-align:center;
position: absolute;
top: 300px;
left: 500px;
background: white;
height:	12px;
width: 12px;
border-radius: 50%;
background: rgba(255,255,255,1);
font-family:sans-serif;
font-size: 1.3em;
font-weight: bold;
color: rgba(128,128,128,0);
transform: translate(-50%, -50%);

/*height: 30px;
width: 30px;
color: rgba(128,128,128,1);*/

animation: touchSuccess 1s linear 1s infinite; 
}

touch-point__content {
transansform: translate(-50%, -50%);
}

@keyframes touchSuccess {

29% {
  color: rgba(128,128,128,0);
}

30% {
  width:  30px;
  height: 30px;
  line-height: 30px;
  background: rgba(255,255,255,0.8);
  color: rgba(128,128,128,1);
  
}

100% {
  width:  60px;
  height: 60px;
  line-height: 60px;
  background: rgba(255,255,255,0);
  color: rgba(128,128,128,0);
}

}

dabblet.html

<div class='js__touch-point'>25
</div>

dabblet.js

// alert('Hello world!');

settings.json

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