present halo animation in Highmap

Question

I'm digging into Highcharts/Highmaps now. I need help.

Occasion is: When server give me lat/lon information, I present a halo animation according to the lat/lon. My problem is the animation.

Desired animation is like this

/*CSS*/
body {
   background-color: black;
}
#circle-1 {
   display: block;
   width: 40px;
   height: 40px;
   border-radius: 40px;
   opacity: 0;
   animation-name: scale;
   animation-duration: 3s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}
@keyframes scale {
   0% {
       transform: scale(0.1);
       opacity: 0;
       box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.5);
   }
   50% {
       transform: scale(0.5);
       opacity: 1;
       box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5);
   }
   100% {
      transform: scale(1);
      opacity: 0;
      box-shadow: 0px 0px 20px rgba(255, 255, 255, 0);
   }
}

//js
var renderer;
$(function () {
    renderer = new Highcharts.Renderer(
        $('#container')[0],
        400,
        300
    );
    drawCircle();
});
function drawCircle(){
    renderer.circle(200, 150, 20).attr({
        id:'circle-1',
        fill: '#FCFFC5',
        stroke: 'black',
        'stroke-width': 1
    }).add();
}

This animation is so far what I can do, check this jsfiddle out.

html, body {
    overflow: hidden;
    background: #111;
}

.hole {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2000;
}

i {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0px;
    top: 0px;
    border-radius: 40px;
    opacity: 0;
    animation-name: scale;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes scale {
    0% {
         transform: scale(0.1);
         opacity: 0;
         box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.5);
    }
    50% {
         transform: scale(1) translate(0px, -5px);
         opacity: 1;
         box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5);
    }
    100% {
         transform: scale(2) translate(0px, 5px);
         opacity: 0;
         box-shadow: 0px 0px 20px rgba(255, 255, 255, 0);
    }
 }

I want the circle stay right there scaling and do some opacity change. But when I apply scale, it seems that it scales according to the left top corner. Your help will be sincerely appreciated.

Answer 1

In transform you should use original translate position scaled by (1 - scale) values, so for scale(0.1) there will be translate(180px, 135px), because 180 = 200 * (1 - 0.1) and 135 = 150 * (1 - 0.1).

To get same circle you could use fill with gradient like:

fill: {
  radialGradient: {
    cx: 0.5,
    cy: 0.5,
    r: 0.5
  },
  stops: [
    [0, 'none'],
    [0.5, 'rgba(0,0,0,0)'],
    [0.5, 'rgba(255,255,255,0.5)'],
    [1, 'rgba(0,0,0,0)']
  ]
},

Example: http://jsfiddle.net/ygzkyv17/

var renderer;
$(function() {
  renderer = new Highcharts.Renderer(
    $('#container')[0],
    400,
    300
  );
  drawCircle();
});

function drawCircle() {
  renderer.circle(200, 150, 40).attr({
    id: 'circle-1',
    fill: {
      radialGradient: {
        cx: 0.5,
        cy: 0.5,
        r: 0.5
      },
      stops: [
        [0, 'none'],
        [0.5, 'rgba(0,0,0,0)'],
        [0.5, 'rgba(255,255,255,0.5)'],
        [1, 'rgba(0,0,0,0)']
      ]
    },
    stroke: 'black',
    'stroke-width': 1
  }).add();

}

body {
  background-color: black;
}
#circle-1 {
  display: block;
  width: 40px;
  height: 40px;
  
  border-radius: 40px;
  opacity: 0;
  animation-name: scale;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes scale {
  0% {
    transform: translate(180px, 135px) scale(0.1);
    opacity: 0;
    box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.5);
  }
  50% {
    transform: translate(100px, 75px) scale(0.5);
    opacity: 1;
    box-shadow: 0px 8px 20px rgba(255, 255, 255, 0.5);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
    opacity: 0;
    box-shadow: 0px 10px 20px rgba(255, 255, 255, 0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 500px"></div>