I need some help if someone can help
I have many lines with fadeout animation with different seconds and I need the first line start over after the last line animation ends
Related
Want a html marquee that repeats the text without ending the same text ends up again in loop before the first line disappear ?
e.g: I got this line in marquee: I love games, I want a marquee that when I disappears,It should should show I from the start then love and then games.
In this fiddle I have a small div with an opacity animation.
The animation plays correctly when the state changes to true and the component is mounted
and the div fades in.
However the animation does not play when the component is unmounted when the state goes to false.
I have the animation set as both, and I tried also applying a reverse animation (from 1 to 0) but it just ends up playing right after the first one and I end up with no square.
How can I make this fade animation play in reverse when the component disappears?
Edit:
I did not mention this is done in React.
My solution eventually was to just use a library for animation, which made this efortless.
I'm leaving the question up though in case others have vanilla solutions to the problem.
I've found sort of a hacky way to solve this. You might find something better later on, but for now, this works.
I've created a class .hide which sets opacity to 0 and visibility to hidden, which will be added to the box. The initial insertion animation is the same. But for exiting, I've applied a transition property to the box. When you click a second time, I've wrapped the setVisible() method in a setTimeout(), that has a delay timing the same as the transition duration for .hide.
This will allow the box to fade out first, and then the setVisible() method will be called.
If you don't want to use a setTimeout(), you can add an eventListener to the box for transitionend, and then call setVisible() once that is done.
Here's a fiddle: https://jsfiddle.net/32y8vjus/1/
PS: In the fiddle, I'm changing the background color to show that the transition happens before the box is removed. You can change that to opacity.
I've tried searching for a way to make text appear after 10 seconds. I'm creating a loading screen for a forum I'm working on. I need to make text appear after 5 seconds of loading that says Continue, this of course is going to be a button/link. I've tried using css to animate the text to appear after 5 secs.
animation: 5 secs;
but this doesn't work for some reason. I would also appreciate help in this.
Animation delay should work
{ animation-delay: 5s; }
I am using a SVG image and animating the path of a diagram. It works fine. However, Once the image has been drawn I need to stop the iteration (stop from the image being redrawn). The code is found in this CODEPEN snippet attached here.
I tried removing infinite from animation in the CSS file, but the drawn image is being removed.
What I want to do is:
1.) Animate the image as shown in the code.
2.) Stop the animation from reanimating (this is because of the infinite attribute used in the animation)
3.) Once the image has been drawn, the image should remain the same unless the user refreshes the page.
Change this line:
animation: draw 10s infinite linear;
to this:
animation: draw 10s forwards;
The forwards fill mode works as follows: After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended
I was wondering how i would create a #keyframe animation that lasts the whole time that the user is on my webpage?
I have set several animations with colour on my website that are all set over a certain period of time, i would really like to know how to make these last the whole time.
Here is my current CSS;
#keyframes goldwhite {
0% {color:whie;}
80% {color:gold;}
100% {color:white;}
}
#bannerleft {
animation:goldwhite 2s;
-webkit-animation:goldwhite 2s;
position:absolute;
margin-top:-2.3%;
font-size:13px;
color:white;
width:130px;
left:18%;
font-weight:600;
}
So if it is possible how would i change this animation to last the whole time ?
My second question for anyone who knows is how would i create the text effect that is used on the apple IOS 7 lock screen, the part that says 'Slide to unlock' which changes effect from plane grey to silver, its hard to explane but it shows it here a little starting at 10 seconds.
http://www.youtube.com/watch?v=8ix7HnH_6cQ
Maybe this effect is on repeat ? as i would like for it to happen multiple times or once every 5 secconds .
Thankyou for your help
You will need javascript/jquery to do this.
When the animation ends, you can capture the event and reset the class. Something like this:
$("#MyDiv").on("webkitAnimationEnd oanimationend msAnimationEnd animationend",
function ()
{
$(this).removeClass("bannerleft");
$(this).addClass("bannerleft");
});
Caveat...I have used the animation end events but not quite like this. You may need to move the animation stuff to a separate class.