Conditional animation iu-template dashboard 2

[Pepex7]

I'm adding with ui-template an icon for alerts in dashboard 2.

<template>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <div  style="text-align: center;">  
        <i v-show="getInvisible()" class="fa-solid fa-bolt blink icon"></i>
        <p v-show="getInvisible()" :items="msg" class ="blink"> {{msg.tmoperado}}</p>
    </div>
</template>

<script>
    export default {
        data () {
        },
        methods: {
        // expose a method to our <template> and Vue Application
            getInvisible: function (item) {
                if (this.msg.tmoperado === "TM OPERADO") 
                return true;
                else 
                return false;
            }
    }
</script>
<style>
    /* define any styles here - supports raw CSS */
    .blink {
        animation: blinker 1.2s linear infinite;
        color: red;
        font-family: sans-serif;
        height: 5%;
    }
    @keyframes blinker {
        100% {
        opacity: 0;
        }
    }
    .altoalarma {
        height: 100%;
    }
    .icon {
    font-size: 30px; /* Tamaño del ícono */
    }
    .invisible {
    visibility: hidden;
    }
</style>

any ideas?