jQuery - dynamically change webkit-animate time parameter

问题

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!

回答1:

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/

来源：https://stackoverflow.com/questions/34691022/jquery-dynamically-change-webkit-animate-time-parameter

标签

jquery

webkit

keyframe