Two effects with javascript in an image

Question

I want to place two javascript effects on an image. The first would cause the image to appear once and from there it would shine often. It is possible?

<div id="logo"> 
                  <a href="index.html">

                      <img  id="efeitoluz"  src="https://cdn1.iconfinder.com/data/icons/ninja-things-1/720/ninja-background-256.png" alt="Demo" width="256" height="256" align="top" alt="Marca da W6 116x152"  /> 

                      </a> </div>

Javascript

 $(window).load(function() {                
                  var colorsArray = new Array('#FBFAFA','#FBFAFA','#FBFAFA','#FBFAFA');
                  var colorInd = 0;
                  var directionArray = new Array('y');
                  var directionInd = 0;

                  $("#efeitoluz").shiningImage({
                      color: '#FBFAFA',
                      onLoopComplete: function()
                      {
                          colorInd++;
                          if (colorInd == colorsArray.length) {colorInd = 0;}

                          if (directionInd == directionArray.length) {directionInd = 0;}

                          $("#efeitoluz").data('shiningImage').settings.color = colorsArray[colorInd];
                          $("#efeitoluz").data('shiningImage').settings.direction = directionArray[directionInd];
                      },
                      opacity : 300
                  });

              });




;(function($, window, document) {
  var animation = 'tile';
  var effect = '';
  var options = {};
  var lastChecked;
  var lastChecked2;

  function animate()
  {
    if($.isEmptyObject(options))
      $('.code').text("$('.efeitoentrada').animate('" + animation + "');");
    else
      $('.code').text("$('.efeitoentrada').animate('" + animation + "', " + JSON.stringify(options, null, 2) +  ");");
    $('.efeitoentrada').animate(animation, options);
  }

  function update()
  {
    var isCombine = $('.combine').is(':checked');
  }

  function click()
  {
    var element = $('.' + $(this).attr('for'));
    var animationId = element.attr('id');
    $('.option-' + animationId).toggleClass('disable');
    if(!element.is(':checked'))
    {
      if(element.parents('.effect').length > 0)
        lastChecked = animationId;
      else
        lastChecked2 = animationId;
    }
  }

  function addButton(key, container)
  {
    var checkbox = $('<input type="checkbox" class="animation-check"/>');
    checkbox.attr('id', container + key).attr('animation', key);
    var label = $('<label class="animation input"></label>');
    label.text(key).attr('for', container + key).click(click);
    $('.' + container).append(checkbox).append(label);
  }

  $(document).ready(function() {
    for(var key in $.animations)
    {
      if(key == 'fn' || key == 'tile')
        continue;
      addButton(key, 'effects');
      addButton(key, 'alternates');
    }

    $('.submit').click(animate);
    $('body').on('change', 'input,select', update);

    var img = $('.efeitoentrada')[0];
    if(img.complete || img.readyState === 4)
     blind();


    else
      $('.efeitoentrada').bind('load', blind);


    $('.blind').click(blind);


  });

  function blind() 
  {
    options = {
      duration: 4000,
      rows: 50,
      sequent: false,
      effect: 'slideFromDown'

    };
    animate();
  }


})(jQuery, window, document);

Answer 1

You can do this way using only css:

HTML:

<img src="image.jpg">

CSS:

img{
  -webkit-animation: fade 2s 0s 1, bright 1s 2s infinite alternate;
}

@keyframes fade {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes bright {
    from {-webkit-filter: brightness(1);}
    to {-webkit-filter: brightness(3);}
}

Structure:

-Webkit-Animation: [animation name] [duration] [delay] [number of iterations]

Remembering that:

-webkit-animation = animation
-webkit-filter = filter

---

Working example.

Info about CSS animations

Info about CSS Filters

---

EDIT

Example using Tile Animation as suggested in the comments.