I need to make customizable the blink speed of a text
And I made in this way:
<style>
.blink {
-webkit-animation: blink 0s step-end infinite;
animation: blink 0s step-end infinite;
}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
@keyframes blink { 50% { visibility: hidden; }}
</style>
<body>
<div id="test" class="blink">Test</div>
<input id="blinkspeed" type="number" value="0">
</body>
<script>
$('#blinkspeed').click(function(){
$("#test")[0].style.webkitAnimation = "blink "+$(this).val()+"s step-end infinite";
});
</script>
jsfiddle here
This blinks with Chrome but not with ff and ie (opera not tested)
Shall I consider that animation is not a standard and I have to write a line for each browser?
I added this
$("#test")[0].style.Animation = "blink "+blinkspeed+"s step-end infinite";
but nothing happened.
Can someone give me some hints please?
Thanks!
this blinks with Chrome but not with ff and ie (opera not tested)
Try using .text()
, String.prototype.replace()
with RegExp
/\d+(?=s)/g
to match number followed by "s"
, update animation-duration
with this.value
of #blinkspeed
$("#blinkspeed").click(function() {
var blinkspeed = this.value;
$("style").text(function(_, style) {
return style.replace(/\d+(?=s)/g, blinkspeed)
})
});
.blink {
-webkit-animation: blink 0s step-end infinite;
-moz-animation: blink 0s step-end infinite;
-ms-animation: blink 0s step-end infinite;
animation: blink 0s step-end infinite;
}
@-webkit-keyframes blink {
50% {
visibility: hidden;
}
}
@-moz-keyframes blink {
50% {
visibility: hidden;
}
}
@-ms-keyframes blink {
50% {
visibility: hidden;
}
}
@keyframes blink {
50% {
visibility: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<body>
<div id="test" class="blink">Test</div>
<input id="blinkspeed" type="number" value="0">
</body>
jsfiddle https://jsfiddle.net/bbc94sp9/6/