Hi I have a logo in a variety of colours that I want to use in a random/ erratic deliberate flicker effect. I could only find other articles about doing blinking tricks with the fadein/ fadeout function. Any ideas on how to do such a trick with css3 and/ or jQuery? I have also seen similar discussions using Math_Floor to randomise a sort of strobing effect but it wasn't quite what I was after.
Use something like this?
.blink {
animation: blink 1s steps(5, start) infinite;
-moz-animation: blink 1s steps(5, start) infinite;
-o-animation: blink 1s steps(5, start) infinite;
-webkit-animation: blink 1s steps(5, start) infinite;
}
#keyframes blink {
to {
visibility: hidden;
}
}
#-webkit-keyframes blink {
to {
visibility: hidden;
}
}
This is <span class="blink">blinking</span> text.
Related
I'm running an animation on some elements that are set to opacity: 0; in the CSS. The animation class is applied onClick, and, using keyframes, it changes the opacity from 0 to 1 (among other things).
Unfortunately, when the animation is over, the elements go back to opacity: 0 (in both Firefox and Chrome). My natural thinking would be that animated elements maintain the final state, overriding their original properties. Is this not true? And if not, how can I get the element to do so?
The code (prefixed versions not included):
#keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; }
50% { transform:scale(1.2); opacity:0.5; }
100% { transform:scale(1.0); opacity:1.0; }
}
Try adding animation-fill-mode: forwards;. For example, the shorthand would be used like this:
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
animation: bubble 1.0s forwards;
If you are using more animation attributes the shorthand is:
animation: bubble 2s linear 0.5s 1 normal forwards;
This gives:
bubble animation name
2s duration
linear timing-function
0.5s delay
1 iteration-count (can be 'infinite')
normal direction
forwards fill-mode (set 'backwards' if you want to have compatibility to use the end position as the final state[this is to support browsers that has animations turned off]{and to answer only the title, and not your specific case})
Available timing-functions:
ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end
Available directions
normal | reverse | alternate | alternate-reverse
IF NOT USING THE SHORT HAND VERSION: Make sure the animation-fill-mode: forwards is AFTER the animation declaration or it will not work...
animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;
vs
animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
Use
animation-fill-mode: forwards;
animation-fill-mode: forwards;
The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count).
Note: The #keyframes rule is not supported in Internet Explorer 9 and earlier versions.
Working example
div {
width: 100px;
height: 100px;
background: red;
position :relative;
-webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
animation: bubble 3s forwards;
/* animation-name: bubble;
animation-duration: 3s;
animation-fill-mode: forwards; */
}
/* Safari */
#-webkit-keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
/* Standard syntax */
#keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
<h1>The keyframes </h1>
<div></div>
I had an issue using forwards: at least in Chrome, even after the animation ended, the renderer was still sucking up graphics resources, making the application less responsive.
An approach that does not cause this trouble is by using an EventListener.
CSS animations emit events, so you can use the animationend event to intervene when the animation ends.
CSS
.fade_in {
animation: fadeIn 2s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
JavaScript
const element = document.getElementById("element-to-be-animated");
element.addEventListener("animationend", () => {
// Set your final state here. For example:
element.style["opacity"] = 1;
}, { once: true });
The option once: true tells the engine to remove the event listener after its execution, leaving your application fresh and clean.
I have created a JSFiddle to show how it works.
As the title says, this animation is not working on Firefox.
I am running this animation through JavaScript after a few seconds by using:
document.getElementById('my_id').style.webkitAnimationPlayState = "running";
I also tried:
style.animationPlayState
In the same file, changing the background-color animation works perfectly.
My conclusion is, there is something wrong with opacity on Firefox?
#my_id {
opacity: 0;
animation: animation 1s;
animation-fill-mode: forwards;
animation-play-state: paused;
-webkit-animation: animation 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
-moz-animation: animation 1s;
-moz-animation-fill-mode: forwards;
-moz-animation-play-state: paused;
}
#keyframes animation {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0.2;}
}
The above CSS is from the element I want to animate.
Instead of using JavaScript to add -webkit-animation-play-state, just add a class to your #my_id div using onload that includes all of the browser prefixes.
JavaScript
window.onload = function() {
document.getElementById("my_id").className += "running";
}
CSS
#my_id.running {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
animation-play-state: running;
}
The above code adds the .running class to your #my_id element, which declares animation-play-state: running, including the browser prefixes. You can test the above code by checking out my example that uses your code. I've tested it and it works in Firefox (51), Chrome, Opera, & Safari.
I have a task to sort a list of elements, which includes animating them.
The code is something like this:
if(condition(first, next)) {
first.className = 'fadeOut';
// some manipulation of both elements
next.className = 'fadeIn';
The css is:
.element {
transition: all 1s ease-in 0s;
-webkit-transition: 1s ease-in;
-moz-transition: 1s ease-in;
-o-transition: 1s ease-in;
transition: 1s ease-in;
}
and the transitions are
#keyframes fadeIn {to {opacity: 1;}}
#keyframes fadeOut {to {opacity: 0;}}
.fadeIn {opacity: 0;animation: fadeIn 2s ease-in 1 forwards;}
.fadeOut{opacity: 1;animation: fadeOut 2s ease-in 1 forwards;}
What I expect is to see the animation running on the first element, then the code being executed and then the animation on the second element. What I see in effect is the code runs and the elements get sorted but the animations are not triggered in the sequence.
I have tried adding timeouts to get each step to wait for the next, but that didn't help.
Can anyone tell me where I am going wrong? Is there a way to get the code to pause long enough for each animation to be visible?
I have a simple keyframe animation:
animation: blink-truck-lights .4s 8s 10s steps(2) 2 forwards ;
#keyframes blink-truck-lights{
from{background-position: 0px 0;}
to{background-position: 0px -250px;}
}
Here is the JS part:
setInterval(function(){
$('#truck').addClass('blink-truck-lights');
},500);
setInterval(function(){
$('#truck').removeClass('blink-truck-lights');
},800);
Now, I would need it to play over a specified time interval, about 8 seconds. How to accomplish this, maybe with adding and removing class with the animation syntax was what came to my mind. But I tried setInterval, and it added the class, but when I created another interval for removing the class, the animation just wouldn't start.
You can do it by pure css also..
#id {
-webkit-animation: NAME-YOUR-ANIMATION 8s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 8s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 8s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 8s infinite; /* IE 10+ */
}
LINK
UPDATE 2:-------------------------------------------------------------------------
Javascript answer
function blink()
{
document.getElementById('blink').className = "animated blink_css";
}
setInterval(function(){
blink();
},8000)
IN CSS--->
#keyframes 'blink' {
//your code for animation
}
//try moz for mozilla,o for opera and webkit for safari and chrome
.blink_css {
-webkit-animation-name: blink;
-moz-animation-name: blink;
-o-animation-name: blink;
animation-name: blink;
}
.animated {
-webkit-animation-duration:8s;
-moz-animation-duration:8s;
-ms-animation-duration:8s;
-o-animation-duration:8s;
animation-duration:8s;
}
UPDATE 3:-------------------------------------------------------------------------
.paused{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
Just add and remove this class whenever you need.Hope this helps.Cheers!!!
This is one way of doing this, other that animationEnd or animationStart events.
Just toggle the class on the desired element, and set the intreval at which you want the animation to start over again.
setInterval(function(){$('#truck').toggleClass('blink-truck-lights')},10000);
Now, the truck lights will blink every 10 seconds.
Hi I would like to blink an image. There is a demo here.
In my website it makes all the images blinking. I would like to blink only one certain image.
Do you have any idea how to do that?
Thanks.
If you inspect it, the blinking is in the css:
-moz-animation: blink normal 2s infinite ease-in-out;
-webkit-animation: blink normal 2s infinite ease-in-out;
-ms-animation: blink normal 2s infinite ease-in-out;
animation: blink normal 2s infinite ease-in-out;
we can provide blinking image illusion through javascript coding by changing the display property of the image to block / none with periodic time intervals...
however, this will increase load at the client side as we need a script to run continously to blink an image...
i would prefer to prepare a GIF blinking image and place it on the website... ( if the requirements permits)
In the tutorial, the effect is set to every image on the page, because the "img" selector selects every image on the page.
img {
border:1px solid #000;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
/* order: name, direction, duration, iteration-count, timing-function */
-moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */
-webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */
-ms-animation:blink normal 2s infinite ease-in-out; /* IE */
animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
Use a class instead; replace img with .blink and add this class to your image:
<img src="..." class="blink" />
From the demo link that you have given, you can apply a class for images or multiple images that you want to blink or unblink.
Here is the Working fiddle for the same.
The HTML
<div>
<img width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials.com/code/images/dont-blink.jpg">
<img class="abc" width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials.com/code/images/dont-blink.jpg">
<img width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials.com/code/images/dont-blink.jpg">
<img width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials.com/code/images/dont-blink.jpg">
<div>
The CSS:
#-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Firefox */
#-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Webkit */
#-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
#keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */
img {
border:1px solid #000;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
/* order: name, direction, duration, iteration-count, timing-function */
-moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */
-webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */
-ms-animation:blink normal 2s infinite ease-in-out; /* IE */
animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
img {
animation: 2s ease-in-out 0s normal none infinite blink;
border: 1px solid #000000;
transition: all 1s ease-in-out 0s;
}
img.abc {
animation: none;
transition: none;
}
So by default all the images are blinking, you just need to apply class .abc (from this example) to unblink the images that you do not want to blink and vice-versa.
Hope this Helps.
As seen here:
How do you make an image blink?
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
img {
animation: blink 1s;
animation-iteration-count: infinite;
}