Css Animation Scale() on Text

Question

I am trying to create a scaling text number to basically pulsate and scale at the same time. I am not sure as to why this isn't working or if I am over riding it some were. The pulsate works fine just not transform.

CSS:

  .grad{
    color: #0a77d5; /* Old browsers */
    color: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); /* FF3.6-15 */
    color: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Chrome10-25,Safari5.1-6 */
    color: linear-gradient(to bottom, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

   }


   .pulsate {
     -webkit-animation: pulsate 1.5s ease-out;
     -webkit-animation-iteration-count: infinite;
     opacity: 1.0;
 }
 @-webkit-keyframes pulsate {
     0% {
         opacity: 0.5;
         transform: scale(1.0);
     }
     50% {
         opacity: 1.0;
         -webkit-transform: scale(2.0);
     }
     100% {
         opacity: 0.5;
         -webkit-transform: scale(3.0);
     }
   }

**.shadow {
    text-shadow: 0 1px 0 #ccc,
      0 2px 0 #c9c9c9,
      0 3px 0 #bbb,
      0 4px 0 #b9b9b9,
      0 5px 0 #aaa,
      0 6px 1px rgba(0, 0, 0, .1),
      0 0 5px rgba(0, 0, 0, .1),
      0 1px 3px rgba(0, 0, 0, .3),
      0 3px 5px rgba(0, 0, 0, .2),
      0 5px 10px rgba(0, 0, 0, .25),
      0 10px 10px rgba(0, 0, 0, .2),
      0 20px 20px rgba(0, 0, 0, .15);
    box-shadow: none !important;

  }

HTML:

<b class="shadow grad pulsate">#1</b>

even if it's not working you should remove them, they are not needed — Temani Afif, Jan 07 '19 at 15:35

score 1 · Accepted Answer · answered Jan 07 '19 at 15:34

You need to set displayrule, and other changes, like the rules without prefix.

CSS

.grad {
  color: #0a77d5;
  /* Old browsers */
  color: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
  /* FF3.6-15 */
  color: -webkit-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
  /* Chrome10-25,Safari5.1-6 */
  color: linear-gradient(to bottom, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.pulsate {
  -webkit-animation: pulsate 1.5s ease-out;
  -webkit-animation-iteration-count: infinite;
  animation: pulsate 1.5s ease-out;
  animation-iteration-count: infinite;
  opacity: 1.0;
  transform: scale(1);
  display: inline-block;  //I set here the display
}

@-webkit-keyframes pulsate {
  0% {
    opacity: 0.5;
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
  50% {
    opacity: 1.0;
    -webkit-transform: scale(2.0);
    transform: scale(2.0);
  }
  100% {
    opacity: 0.5;
    -webkit-transform: scale(3.0);
    transform: scale(3.0);
  }
}

**.shadow {
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
  box-shadow: none !important;
}

HTML

<b class="shadow grad pulsate">#1</b>

DEMO HERE

@TemaniAfif, That´s is not the question, i keep old style (from the op), but make it work. And maybe he wants to make it work with old chrome browser, i really don´t know , my main focus was making work. :) — Luís P. A., Jan 07 '19 at 15:42

Css Animation Scale() on Text

1 Answers1