Apply effects on a PictureMarkerSymbol feature in a web map using the ArcGIS API for JavaScript

Summary

Picture files can be used as a replacement for point or polygon features in ArcGIS API for JavaScript by using the PictureMarkerSymbol class. The documentation, ArcGIS API for JavaScript: Class: PictureMarkerSymbol provides further information.

In certain cases, effects can be implemented to the feature to emphasize the desired features to be selected, for example, the pulse effect. The pulse effect works by blinking the features in a specified time frame manner to emphasize them. This in turn can help prevent users from clicking the wrong feature.

Procedure

...
var gl = new GraphicsLayer ({id: "blink"});
...

<style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0; 
      }
      @-webkit-keyframes
       pulse
      {
        0%
        {
          opacity: 1.0;

        }
        45%
        {
          opacity: .20;

        }
        100%
        {
          opacity: 1.0;

        }
      }
      #blink_layer { 
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-name: pulse;
        -moz-animation-duration: 3s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-name: pulse;
      }
    </style>

Note:
The above code snippets is an example of declaring a new feature with an id referred called 'blink'. The CSS file is then modified, declaring a @keyframe properties to describe the behavior of the animation desired. The #blink_layer is used to define the recurrence of the animation for every features created with the 'blink' id.