How to make text blinking with CSS or jQuery Без майтап HTTP
dark mode
How to make text blinking with CSS or jQueryHow to make text blinking with CSS or jQuery

 

Here, am setting animation duration should be  1 second , than am setting the  timing  to  linear  that means it will be constant throughout, and last am using  animation-iteration-count  and I`ve set that to  infinite that means it will go on and on. Am calling the same properties with a -webkit  prefix for  webkit browser support as well as  -moz  for older versions of Firefox.

 

Test script on: http://jsfiddle.net/umz8t/

 

 

HTML
Blink - ‹p class="blink_me"› Blink ‹/p›
‹!-- Add class="blink_me" to the element --›

CSS
.blink_me {
    color:#0153A5;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 0;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

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

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; }
}

 

Alternatively if you do not want a gradual transition between show and hide (e.g. a blinking text cursor) you could use something like 

/* Also use prefixes with @keyframes and animation to support current browsers */
@keyframes blinker {
   0% { visibility: visible; }
   50% { visibility: hidden; }
   100% { visibility: visible; }
}
.cursor {
animation: blinker steps(1) 1s infinite;
}

 

If you want to add some colors to blink/fade effect add  color:red;  to every percentage.

    0% { opacity: 1.0; }
    50% { opacity: 0.3; color:red;}
    100% { opacity: 1.0;  color:blue;}

 

This won`t work on older versions of Internet Explorer, for that, you need to use jQuery or JavaScript....

jQueryfunction blinker() {
    $(`.blink_me`).fadeOut(500).fadeIn(500);
}

setInterval(blinker, 1000); //Runs every second



Examples with CSS blinking effects http://www.w3schools.com/css/css3_animations.asp

 

 Changing CSS changing one tiny thing in code and everything breaks.

How to make text blinking with CSS or jQuery

How to DRAG a div


Comments for How to make text blinking with CSS or jQuery

.com

Be the first to comment




Ние се грижим за вашите данни и ще използваме бисквитки само за да подобрим вашето преживяване.
OK OKНе Декларация за поверителност