Simple blinking effect using css3 and Jquery | 2my4edge

08 April 2015

Simple blinking effect using css3 and Jquery

Simple blink effect using css3 and with Jquery. We usually use text-decoration:blink; is for blink effect css. but now a days it is not working. so we are going the alternative solution. that is by using CSS3 and with Jquery. here i'm going to tell you two methods to use this blink effect one is with CSS3 and another one is with Jquery.

simple blink effect using css and jquery

DOWNLOAD           LIVE DEMO CSS         LIVE DEMO JQUERY

by using CSS3, we have a solution that, we can using opacity, when we are reducing the opacity the data will be hidden. when tha opacity is 0, when it is 1, it will be normal. so like that we are going to use that with keyframes in css3. We are give that when the keyframes is in 0% the blinking data will be normal. that mean opacity level is 1, when the keyframes is 50%, the opacity level is 0, again when it is in 100% the opacity will be 1. and for the animation we can give any name, and the animation duration is 1s (1 second), animation timing function is linear for constant, and the animation count is infinite.

HTML CODE
<h2 id="blinkeffect" align="center"> Blinking Text </h2>

BLINK EFFECT USING CSS
<style type="text/css">
#blinkeffect {
    -webkit-animation-name: blink;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blink;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blink;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blink {  
    0% { opacity: 1.0; color: blue; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; color: red; }
}

@-webkit-keyframes blink {  
    0% { opacity: 1.0; color: blue;}
    50% { opacity: 0.0; }
    100% { opacity: 1.0; color: red; }
}

@keyframes blink {  
    0% { opacity: 1.0; color: blue; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; color: red; }
}
</style>

the above code is simple bliking effect by using CSS3.

BLINK USING JQUERY
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
function blink() {
    $('#blinkeffect').fadeOut(500).fadeIn(500);
}
setInterval(blink, 1000); 
</script>

the above code is by Jquery for simple blink effect. i believe is small note is really really full to you. thanks fro the attention.





RELATED POSTS :
Change color to black and white image using css
Change text & background color while selecting text using CSS3
Create custom file chosen input type using Css and Jquery
Rotate image on hover using CSS3
Image zoom on hover using css3
Place the Text on image using CSS
How to make fixed background image for all browser using Css
Floating menu using Jquery
Full screen API using JQuery

No comments:

Post a Comment

^