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

[MS2]

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

[SteveCole]

Check out this previous thread.

Here's a rough demo. Not great but maybe you can refine it.

[KenBuja]

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);

        var shape = graphicFlash.getDojoShape();
        var animStroke = dojoxGfxFx.animateStroke({
            shape: shape,
            duration: 500,
            color: { end: new Color([0, 0, 0, 0]) }
        });
        var animFill = dojoxGfxFx.animateFill({
            shape: shape,
            duration: 500,
            color: { end: new Color([0, 0, 0, 0]) }
        });
        var anim = coreFx.combine([animStroke, animFill]).play();
        aspect.after(anim, "onEnd", function () {
            map.graphics.remove(graphicFlash);
        });
    }
});

[EvelynHernandez]

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

[MS2]

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