How to emulate the red glow effect from the Flex API in JavaScript API?

Question

I am trying to emulate the red glow effect from the Flex API in JavaScript API. All my graphics layers are rendered in SVG. If I have N number of Graphics object in my GraphicsLayer, How can I apply the red glow effect that is present in flex to a particular Graphic in GraphicsLayer using JavaScript and CSS?.  I'm trying to apply effect one like in the below link. But couldn't add such animation effect to a Graphics object rendered in SVG. Any help or examples will be much appreciated.

Sample glow effect URL :Map marker in CSS

MS2 · Answer

Thank you for your input Steve Cole​,  Ken Buja and Evelyn Hernandez.  Based on the inputs provided, I'm able to arrive at below glow effect using CSS animation. It may not be a perfect solution, but able to emulate the glow effect and it works in IE11, Chrome and Firefox.

JSFiddle Link

EvelynHernandez · Answer

Idk if u can, but its an idea.

Why u dont put a .gif image per each graphic on the map for the query result?, setting the source of the marker symbol.

Will be interesting if u share the code when u solve ur problem

kenbuja · Answer

This is the code I use to "flash" a feature. It's used in this application. To see it in action, turn on the Habitat Boundary layer, select a polygon, then click on a row in the grid to see it flash.

require(["dojo/aspect", "dojo/fx", "dojox/gfx/fx", ... ], function(aspect, coreFx, dojoxGfxFx, ... ){ ...

function flashFeature(graphic) {
        if (graphic === null) { return; }

var graphicFlash, extent;

var symbolFlashPoint = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
                      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1),
                      new Color([255, 0, 0, 0.5]));
        var symbolFlashPolyline = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                               new Color([255, 0, 0, 0.5]), 3);
        var symbolFlashPolygon = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                              new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2),
                              new Color([255, 0, 0, 0.25]));

switch (graphic.geometry.type) {
            case "point":
                extent = graphic.geometry;
                graphicFlash = new Graphic(graphic.geometry, symbolFlashPoint);
                break;
            case "multipoint":
                extent = graphic.geometry.getExtent();
                graphicFlash = new Graphic(graphic.geometry, symbolFlashPoint);
                break;
            case "polyline":
                extent = graphic.geometry.getExtent();
                graphicFlash = new Graphic(graphic.geometry, symbolFlashPolyline);
                break;
            case "polygon":
                extent = graphic.geometry.getExtent();
                graphicFlash = new Graphic(graphic.geometry, symbolFlashPolygon);
                break;
            case "extent":
                extent = graphic.geometry;
                graphicFlash = new Graphic(graphic.geometry, symbolFlashPolygon);
                break;
        }

if (!map.extent.contains(extent)) { return; }

map.graphics.add(graphicFlash);