Modifying the duration of a CSS animation dynamically for each new message directly within HTML is unfortunately not possible. CSS can't directly accept HTML attributes as values. That being said, it can be done using JavaScript or jQuery.

Here's an example in which we use JavaScript to read a data attribute from a element and apply it to the inline style:

HTML:

```html
<div class='blink' data-blink-speed='1000'>TEST 1</div>
<div class='blink' data-blink-speed='500'>TEST 2</div>
```

JavaScript:

```html
<script>
var blinks = document.querySelectorAll('.blink');
for (var i = 0; i< blinks.length; i++) {
  var speed = blinks[i].getAttribute('data-blink-speed');
  blinks[i].style.animationDuration = speed + 'ms';
}
</script>
```

In this script, we go through every element with class 'blink', get its 'data-blink-speed' attribute, and use that to set the animation duration.

The CSS would remain the same:

```html
<style>
.blink {
  animation: blinker linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
</style>
```

If you want to use jQuery instead, the code would be:

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.blink').each(function() {
    var speed = $(this).data('blink-speed');
    $(this).css('animation-duration', speed + 'ms');
  });
});
</script>
```

This does essentially the same thing as the pure JavaScript example. It goes through all elements with the class 'blink', reads the 'blink-speed' data attribute and applies it as the animation's duration.