Sample touch animations

dabblet.css

/**
 * Sample touch animations
 */

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

.js__touch-point {
position: absolute;
top: 300px;
left: 500px;
}

.touch-point__block {
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;

animation: touchSuccess-bubble 0.5s linear 1s infinite;
}

.touch-point__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*display: none;*/

animation: touchSuccess-text 0.5s linear 1s infinite;
}


@keyframes touchSuccess-text {
49% {  color: rgba(128,128,128,0); }
50% {  color: rgba(128,128,128,1); }
100% { color: rgba(128,128,128,0); }
}

@keyframes touchSuccess-bubble {
50% {
  width:  30px;
  height: 30px;
  background: rgba(255,255,255,0.8);
}

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

}

/*
then goes to 30px and 80% opacity

ends with 60px and 0% opacity
*/

dabblet.html

<div class='js__touch-point'>
  <div class='touch-point__block'></div>
  <div class='touch-point__content'>25</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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