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.
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.
A page of my website has a news feed where I use AJAX to return each day one at a time and display it. I want each days news to appear with a fade in.
The problem is the fade in repeats, for each day that I return
Html
<div id='newsdiv' class='newsDiv'></div>
Javascript AJAX call
document.getElementById('newsdiv').innerHTML += xmlhttp.responseText;
CSS
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.divFadeIn, .centreScreen, .tbl_houseForm {
-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s; /* Firefox < 16 */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera < 12.1 */
animation: fadein 3s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
If I put the fade in the parent to the new feed, then it'll fade in when the first day is returned, but not for any of the following days.
If I put the fade in on a child div, then it'll fade in when each and every day is returned (i.e. repeating the fade in when the next day is returned).
How do I stop this from happening? How do I stop each day from fading in more than once?
I do understand that each day is only fading in because the div "divNews" is being re-populated. But this understanding doesn't solve my problem.
You should append a new element in your parent div instead of updating the whole content.
You can return json with your ajax call and create the new element on the fly with the returned data on the callback function.
A simple example using jquery :
$.get('your_url',function(data){
var el = $('<div></div>').addClass('animation_class').html(data.key);
$('#newsdiv').append(el);
});
I solved it myself.
I made sure the fade in was done by a div that did nothing else and then before I add the following days news I removed the class name from the div.
var sTempNewsFeed = document.getElementById('newsdiv').innerHTML;
sTempNewsFeed = sTempNewsFeed.replace('class=\'divFadeIn\'', '');
sTempNewsFeed = sTempNewsFeed.replace('class=\"divFadeIn\"', '');
sTempNewsFeed += xmlhttp.responseText;
document.getElementById('newsdiv').innerHTML = sTempNewsFeed;
document.getElementById("clicky").addEventListener("click", changeMe);
function changeMe() {
var ele = document.getElementById("item");
ele.className= "hide";
}
#clicky{cursor:pointer;}
.hide {
animation: fadeout 1s ;
-webkit-animation: fadeout 1s ; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes fadeout {
from {
display:block;
visibility:visible;
opacity: 1;}
to {
display:none;
visibility:hidden;
opacity:0;}
}
/* Standard syntax */
#keyframes fadeout {
from {
display:block;
visibility:visible;
opacity: 1;}
to {
display:none;
visibility:hidden;
opacity:0;}
}
<a id="clicky">Click me</a>
<br /><br />
<div id="item">I should go bye byes!<br />But instead, I return!!!</div>
I have seen the similar questions aready, such as css3 animation keep reverting to original state
Most of them suggest adding -webkit-animation-fill-mode: forwards; which I have but it doesn't fix the issue because I'm trying to do this in IE 11.
Every time my animation runs, it reverts back to the original state.
It works fine in Chrome, but I need this in IE 10+.
Just add
animation-fill-mode: forwards;
which is the standard syntax for the webkit prefixed version you are using.
http://jsfiddle.net/d2d46zf8/7/
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.