Animated Beacon CSS - css

Question

Does anybody know of a way to make an animated beacon with pure CSS just as on display here: https://codepen.io/rjerue/pen/xagoJG
(function (lib, img, cjs, ss, an) {
var p;
lib.webFontTxtInst = {};
var loadedTypekitCount = 0;
var loadedGoogleCount = 0;
var gFontsUpdateCacheList = [];
var tFontsUpdateCacheList = [];
lib.ssMetadata = [];
lib.updateListCache = function (cacheList) {
for(var i = 0; i < cacheList.length; i++) {
if(cacheList[i].cacheCanvas)
cacheList[i].updateCache();
}
};
lib.addElementsToCache = function (textInst, cacheList) {
var cur = textInst;
while(cur != null && cur != exportRoot) {
if(cacheList.indexOf(cur) != -1)
break;
cur = cur.parent;
}
if(cur != exportRoot) {
var cur2 = textInst;
var index = cacheList.indexOf(cur);
while(cur2 != null && cur2 != cur) {
cacheList.splice(index, 0, cur2);
cur2 = cur2.parent;
index++;
}
}
else {
cur = textInst;
while(cur != null && cur != exportRoot) {
cacheList.push(cur);
cur = cur.parent;
}
}
};
lib.gfontAvailable = function(family, totalGoogleCount) {
lib.properties.webfonts[family] = true;
var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];
for(var f = 0; f < txtInst.length; ++f)
lib.addElementsToCache(txtInst[f], gFontsUpdateCacheList);
loadedGoogleCount++;
if(loadedGoogleCount == totalGoogleCount) {
lib.updateListCache(gFontsUpdateCacheList);
}
};
lib.tfontAvailable = function(family, totalTypekitCount) {
lib.properties.webfonts[family] = true;
var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];
for(var f = 0; f < txtInst.length; ++f)
lib.addElementsToCache(txtInst[f], tFontsUpdateCacheList);
loadedTypekitCount++;
if(loadedTypekitCount == totalTypekitCount) {
lib.updateListCache(tFontsUpdateCacheList);
}
};
// symbols:
(lib._3 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#A72008").s().p("AipCqQhGhGAAhkQAAhiBGhHQBGhGBjAAQBkAABGBGQBGBHAABiQAABjhGBHQhGBGhkAAQhjAAhGhGgAiNiMQg6A6AABSQAABTA6A7QA7A6BSAAQBTAAA7g6QA6g7AAhTQAAhSg6g6Qg7g7hTAAQhSAAg7A7g");
this.shape.setTransform(24,24);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,48,48);
(lib._2 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#A72008").s().p("AhwBxQgvguAAhDQAAhBAvgvQAvgvBBAAQBCAAAvAvQAvAvAABBQAABDgvAuQgvAvhCAAQhBAAgvgvgAhUhTQgjAiAAAxQAAAyAjAjQAjAjAxAAQAxAAAkgjQAjgjAAgyQAAgxgjgiQgkgkgxAAQgxAAgjAkg");
this.shape.setTransform(16,16);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,32,32);
(lib._1 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#A72008").s().p("AgwAyQgVgVAAgdQAAgcAVgUQAUgVAcAAQAdAAAVAVQAUAUAAAcQAAAdgUAVQgVAUgdAAQgcAAgUgUg");
this.shape.setTransform(7,7);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,14,14);
// stage content:
(lib.Untitled1 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// FlashAICB
this.instance = new lib._3("synched",0);
this.instance.parent = this;
this.instance.setTransform(102.5,96,1,1,0,0,0,24,24);
this.timeline.addTween(cjs.Tween.get(this.instance).to({scaleX:1.63,scaleY:1.63,alpha:0},24).wait(1));
// Layer 2
this.instance_1 = new lib._2("synched",0);
this.instance_1.parent = this;
this.instance_1.setTransform(102.5,96,1,1,0,0,0,16,16);
this.timeline.addTween(cjs.Tween.get(this.instance_1).to({scaleX:1.63,scaleY:1.63,alpha:0},24).wait(1));
// FlashAICB
this.instance_2 = new lib._1("synched",0);
this.instance_2.parent = this;
this.instance_2.setTransform(102.5,96,1,1,0,0,0,7,7);
this.timeline.addTween(cjs.Tween.get(this.instance_2).to({regX:7.1,scaleX:1.79,scaleY:1.79,x:102.7,alpha:0},24).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(178.5,172,48,48);
// library properties:
lib.properties = {
width: 200,
height: 200,
fps: 24,
color: "#000000",
opacity: 1.00,
webfonts: {},
manifest: [],
preloads: []
};
})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{}, AdobeAn = AdobeAn||{});
var lib, images, createjs, ss, AdobeAn;
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>concentric_circles</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="concentric_circles.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
handleComplete();
}
function handleComplete() {
exportRoot = new lib.Untitled1();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
fnStartAnimation = function() {
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function makeResponsive(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w*sRatio+'px';
canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
}
}
makeResponsive(false,'both',false,1);
fnStartAnimation();
}
</script>
</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(0, 0, 0, 1.00); width:200px; height:200px">
<canvas id="canvas" width="200" height="200" style="position: absolute; display: block; background-color:rgba(0, 0, 0, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:200px; height:200px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>
I'm primarily trying to get it to work on one div that has an image inside of it. I'm primarily having difficulty with getting the concentric circles. I think that I can get away with just doing pules with shadow backgrounds, but this has 3 different circles. One in the middle, and then two along the outside. Would it be better to make it grow and then fade? Or would it make more sense to have shadows, borders, and size actually grow? Are there transform elements? Ideally, this would just be one CSS class that I can tack onto a div, but I could also use before and after pseudoclasses too
Thanks!

Answer 1

Using scss and radial-gradiant seems to have solved my animation woes:
#keyframes ripple {
#for $j from 0 through 100 {
$i: 100 - $j;
$percent: 0% + $j;
$factor: $j/100.0;
$opacity: 1.0 - ($j/100.0) ;
#{$percent} {
background: radial-gradient(rgba(255, 0, 0, $opacity) #{.8em * $factor}, transparent 0, transparent #{1.5em * $factor}, rgba(255, 0, 0, $opacity) 0, rgba(255, 0, 0, $opacity) #{2.5em * $factor}, transparent 0, transparent #{3.5em * $factor}, rgba(255, 0, 0, $opacity) 0, rgba(255, 0, 0, $opacity) #{4.5em * $factor}, transparent 0);
}
}
}
this allows for 1->100 to be nade for the radial gradient. Seems to work in Chrome, but that's what the client wants anyway!