Animated Hotspot with Images

Animated-Hotspot-with-Images.markdown

Animated Hotspot with Images

It's a simple example that makes an animated hotspot for a tour inside tutorya.com.

A Pen by David Felipe Camargo Polo on CodePen.

License.

index.html

<div id="hotspot"></div>

style.sass

@import "compass/css3"
#hotspot
  width: 60px
  height: 60px
  margin: 10px auto
  animation: growing 2000ms ease-in infinite
  background: image-url('https://lh3.googleusercontent.com/4BsJrQBcRf8UnBc2zvJh4-QUGZw5JvydHUiK98ngfWRmFELHzftWQvstcFqtvKFGvEevlzt_cX8jpmwVHr7AFIsNtvweYY_D=w1342-h539')
@keyframes growing
  0%
    background: image-url('https://lh3.googleusercontent.com/4BsJrQBcRf8UnBc2zvJh4-QUGZw5JvydHUiK98ngfWRmFELHzftWQvstcFqtvKFGvEevlzt_cX8jpmwVHr7AFIsNtvweYY_D=w1342-h539')
  25%
    background: image-url('https://lh3.googleusercontent.com/NUdySdQ5x5Hu2a1S60JYGN_ibZFDdJR04WMDXhHAifeHEcAt0kC30ocmqlcoa1IuYkLw3jJcLhetmJbxwFR1XtsrGjO9j8IQ=w1342-h539')
  50%
    background: image-url('https://lh4.googleusercontent.com/0bLYzVZj0t7iXG_gL8jKhG4UgQTlha__YFvclHDE9C_ICSm6ymOPLdbFWYV7uE8GehS8u7VFobTbCYx8pTBG6n2s6FCqwYnK=w1342-h539')
  75%
    background-position: image-url('https://lh3.googleusercontent.com/Usr0lMWEFO0v0W3Um7mUUBOU3ilqQpWhHRhDdh5SF-YuuhVzl3nCZ-CyzQC548NB1QvP1dKHs_r2VyjHUHAXhtU_m8H4T7PZ=w1342-h539')