Zoom in out of Words css

Question

I'm trying to do a WordCloud with zoom in-out of words. I'm using JavaScript to randomly set CSS to zoom the words, however the words just disappear and then appear.

This is my CSS code:

svg text.zoom {
   /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1, 1); /*This is the scale for the normal size of the image. */
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;

  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition: ease-in-out;


  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: ease-in-out;
}

Can someone help?

Answer 1

Looks like you have missed the standart transition property. Try adding the following CSS code

svg text.zoom{
    transition: all 0.5s ease-in-out;
}

I hope this will help