cssblink

Css fade-in-out blinking


I'm trying to make a div flash, but I don't want the text inside it to flash, just the button itself. I'm not sure how I can go around this. I hope this makes sense Can anyone help please?

Here is the code:

@-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0.5;} 100%{opacity:1;}} /* Firefox */
@-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0.5;} 100%{opacity:1;}} /* Webkit */
@-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0.5;} 100%{opacity:1;}} /* IE */
@keyframes blink {0%{opacity:1;} 50%{opacity:0.5;} 100%{opacity:1;}} /* Opera */

.download {
    background-color: red;
    padding: 15px 15px 15px 15px;
    text-align:center;
    margin-bottom: 4px;
    font-size: 24px;
    border-radius: 5px;
    -moz-transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -ms-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out; 
    -moz-animation:blink normal 1.5s infinite ease-in-out; /* Firefox */
    -webkit-animation:blink normal 1.5s infinite ease-in-out; /* Webkit */
    -ms-animation:blink normal 1.5s infinite ease-in-out; /* IE */
    animation:blink normal 1.5s infinite ease-in-out; /* Opera */
}
<div class="download">DOWNLOAD TRIAL</div>


Solution

  • @keyframes blink {
        0% {
               background-color: rgba(255,0,0,1)
        }
        50% {
               background-color: rgba(255,0,0,0.5)
        }
        100% {
               background-color: rgba(255,0,0,1)
        }
    }
    @-webkit-keyframes blink {
        0% {
               background-color: rgba(255,0,0,1)
        }
        50% {
               background-color: rgba(255,0,0,0.5)
        }
        100% {
               background-color: rgba(255,0,0,1)
        }
    }
    
     .download {
    
        padding: 15px 15px 15px 15px;
        text-align:center;
        margin-bottom: 4px;
        font-size: 24px;
        border-radius: 5px;
        -moz-transition:all 0.5s ease-in-out;
        -webkit-transition:all 0.5s ease-in-out;
        -o-transition:all 0.5s ease-in-out;
        -ms-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
        -moz-animation:blink normal 1.5s infinite ease-in-out;
        /* Firefox */
        -webkit-animation:blink normal 1.5s infinite ease-in-out;
        /* Webkit */
        -ms-animation:blink normal 1.5s infinite ease-in-out;
        /* IE */
        animation:blink normal 1.5s infinite ease-in-out;
        /* Opera */
    }
    <div class="download">
        <h1>DOWNLOAD</h1>
    </div>

    opacity will affect the div and all it's children. What I suspect you need is a background color with an alpha (transparency) component. So...use RGBA colors on the background