Css Animation Scale() on Text [duplicate] - css

Question

This question already has answers here:
CSS transform doesn't work on inline elements
(2 answers)
Closed 4 years ago.
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>

Answer 1

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