Css fade-in-out blinking

blink, css

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

Problem

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> ```

Original source