Animated light reflection on image in Css or Jquery

css, css-animations, html, javascript, jquery

Solution

You can do this with a pseudo element that has a `linear-gradient` as a background with an `animation` that moves it across the image.

div {
  display: inline-block;
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  top: -30%;
  right: -200%;
  width: 50%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient( to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
  animation: shine 2s 1s;
}

@keyframes shine {
  to {
    opacity: 1;
    right: 210%;
  }
}

<div>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>

Problem

Take a look at below image: I need to animate white light reflection on image to go in from right side and go out from the left side of the image. I did some effect with SVG on it like this: ``` <div class="wrapper_1"> <img src="../images/stone.png"/> <svg width="1600" height="600" viewBox="0 0 1600 600"> <filter id="demo1"> <feGaussianBlur stdDeviation="3" result="blur4"/> <!--Lighting effect--> <feSpecularLighting result="spec4" in="blur4" specularExponent="35" lighting-color="#cccccc"> <!--Light source effect--> <fePointLight x="75" y="100" z="200"> <!--Lighting Animation--> <animate attributeName="x" values="75;320;75" dur="10s" repeatCount="indefinite"/> </fePointLight> </feSpecularLighting> <!--Composition of inputs--> <feComposite in="SourceGraphic" in2="spec4" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> <filter id="demo2"> <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur5"/> <!--Composition of inputs--> <feComposite in="SourceGraphic" in2="blur5" operator="arithmetic" k1="0" k2="3" k3="3" k4="0"/> </filter> <!--Apple tree graphic--> <g class="tree" filter="url(#demo4)"> <g> <line fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="square" x1="1383" y1="1088" x2="1173" y2="967" id="svg_35"/> <path fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="round" d="m1386,1088c0,-1 -1.74023,-2.24011 -11,-12c-14.60046,-15.38916 -23.23303,-21.74231 -31,-29c-19.28979,-18.02515 -31.61121,-26.5639 -43,-34c-11.63245,-7.59521 -23.15662,-13.7597 -34,-21c-20.3031,-13.5567 -29.34851,-21.79224 -45,-34c-19.25012,-15.01447 -30.85657,-22.21942 -43,-30c-12.85242,-8.23492 -29.57715,-16.93311 -58,-33c-13.28821,-7.5116 -28.6228,-13.63135 -43,-21c-11.60315,-5.94696 -22.30103,-10.31696 -32,-15c-14.52051,-7.01111 -19.54919,-9.95514 -23,-11c-1.91418,-0.57959 -2,-1 -3,-1c-1,0 -2,0 -3,0c-1,0 -1.87854,-0.49347 -5,-1c-1.97418,-0.32037 -4,-1 -6,-1c-2,0 -4,0 -7,-1l-1,-1l-1,0l-1,0" id="svg_36"/> <line fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="square" x1="1442" y1="1054" x2="1001" y2="852" id="svg_39"/> <path fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="round" d="m1624,1124c-5,-1 -10.99146,-1.0614 -18,-2c-7.99097,-1.07007 -14.97437,-3.10547 -23,-5c-8.9729,-2.11816 -18,-5 -27,-8c-9,-3 -27.51636,-8.2207 -51,-16c-12.34058,-4.08789 -24.86792,-8.3866 -39,-13c-26.7699,-8.73901 -39.75305,-11.58337 -51,-16c-8.83044,-3.46765 -18,-7 -26,-11c-6,-3 -15.90649,-9.14392 -22,-13c-4.92725,-3.11804 -11.23401,-6.49292 -16,-9c-6.38196,-3.35718 -10.89355,-7.19672 -20,-12c-7.91125,-4.17285 -18.04663,-6.84888 -28,-10c-9.04443,-2.86334 -18.97974,-7.09595 -33,-10c-4.99304,-1.03424 -11.83813,-2.46552 -17,-4c-4.88757,-1.45294 -10.97034,-2.09113 -17,-4c-9.95337,-3.15112 -16,-5 -22,-8l-3,-1l-6,-3l-1,0" id="svg_41"/> </g> <g display="inline"> <line fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="square" x1="1383" y1="1088" x2="1173" y2="967" id="svg_28"/> <path fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="round" d="m1386,1088c0,-1 -1.74023,-2.24011 -11,-12c-14.60046,-15.38916 -23.23303,-21.74231 -31,-29c-19.28979,-18.02515 -31.61121,-26.5639 -43,-34c-11.63245,-7.59521 -23.15662,-13.7597 -34,-21c-20.3031,-13.5567 -29.34851,-21.79224 -45,-34c-19.25012,-15.01447 -30.85657,-22.21942 -43,-30c-12.85242,-8.23492 -29.57715,-16.93311 -58,-33c-13.28821,-7.5116 -28.6228,-13.63135 -43,-21c-11.60315,-5.94696 -22.30103,-10.31696 -32,-15c-14.52051,-7.01111 -19.54919,-9.95514 -23,-11c-1.91418,-0.57959 -2,-1 -3,-1c-1,0 -2,0 -3,0c-1,0 -1.87854,-0.49347 -5,-1c-1.97418,-0.32037 -4,-1 -6,-1c-2,0 -4,0 -7,-1l-1,-1l-1,0l-1,0" id="svg_29"/> <path fill="none" stroke="" stroke-linejoin="null" stroke-linecap="round" d="m274.31702,193.091c9.00897,-18.4798 14.82697,11.772 13.758,9.87198l12.98898,-18.55298" transform="rotate(50, 287.689, 193.73)" id=""/> <line fill="none" stroke-linejoin="null" stroke-linecap="square" x1="1442" y1="1054" x2="1001" y2="852" id="svg_32"/> <path fill="none" stroke="#ccc" stroke-linejoin="null" stroke-round="square" d="m1624,1124c-5,-1 -10.99146,-1.0614 -18,-2c-7.99097,-1.07007 -14.97437,-3.10547 -23,-5c-8.9729,-2.11816 -18,-5 -27,-8c-9,-3 -27.51636,-8.2207 -51,-16c-12.34058,-4.08789 -24.86792,-8.3866 -39,-13c-26.7699,-8.73901 -39.75305,-11.58337 -51,-16c-8.83044,-3.46765 -18,-7 -26,-11c-6,-3 -15.90649,-9.14392 -22,-13c-4.92725,-3.11804 -11.23401,-6.49292 -16,-9c-6.38196,-3.35718 -10.89355,-7.19672 -20,-12c-7.91125,-4.17285 -18.04663,-6.84888 -28,-10c-9.04443,-2.86334 -18.97974,-7.09595 -33,-10c-4.99304,-1.03424 -11.83813,-2.46552 -17,-4c-4.88757,-1.45294 -10.97034,-2.09113 -17,-4c-9.95337,-3.15112 -16,-5 -22,-8l-3,-1l-6,-3l-1,0" id="svg_34"/> </g> </g> </svg> ``` but that did not worke. Actually tried with SVG but I looking for CSS or Jquery way.so any one can help?!

Original source