I am trying to show div after 10s.
It gets success, but it is also hiding automatically.
I don't want to hide it!
I tried: http://jsfiddle.net/omarqa/fs69z2e7/
Remove opacity: 0; from class element-to-animate
New code:
.element-to-animate {
-webkit-animation: NAME-YOUR-ANIMATION 10s;
-moz-animation: NAME-YOUR-ANIMATION 10s;
-o-animation: NAME-YOUR-ANIMATION 10s;
animation: NAME-YOUR-ANIMATION 10s;
}
You have a animation, every animation has an interval.
if you want that be loop the animation you have to set
animation-iteration-count: 1;
https://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp
Replace opacity value at 100% from 0 to 1 in all your keyframes.
And add animation-fill-mode: forwards property in your class .element-to-animate
.element-to-animate {
-webkit-animation: NAME-YOUR-ANIMATION 10s forwards;
-moz-animation: NAME-YOUR-ANIMATION 10s forwards;
-o-animation: NAME-YOUR-ANIMATION 10s forwards;
animation: NAME-YOUR-ANIMATION 10s forwards;
opacity:0;
}
Related
I made a background-image slider which works well in Chrome and Edge but not in Firefox.
In Chrome the background images changes to another image and the transition goes smooth (like it should be). But in Firefox there is no visible 'smooth' transition. The background images are changing but the transition is instant.
I already put the vendor prefix in my CSS:
-webkit-animation: hero-slider 15s infinite;
-moz-animation: hero-slider 15s infinite;
-ms-animation: hero-slider 15s infinite;
animation: hero-slider 15s infinite;
I also defined the four different animations with the prefix:
#-webkit-keyframes hero-slider
{}
#-moz-keyframes hero-slider
{}
#-ms-keyframes hero-slider
{}
#keyframes hero-slider
{}
I also tried this:
-webkit-animation: hero-slider 15s;
-moz-animation: hero-slider 15s;
-ms-animation: hero-slider 15s;
animation: hero-slider 15s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
Firefox version: 82.0.3
Chrome version: 86.0.4240.198
Edge version: 86.0.622.69
Do you have any suggestions why the transition is not smooth in Firefox?
Thanks in advance!
I would like to make a text from my div class "fadeOut" to disappear after being displayed for 2 sec.
Is there a simple way to do that with a css transition ?
$('#errMsg').append('<div class="fadeOut">Beware</div>')
Looks like you are using jQuery
try this
$('#errMsg').append('<div class="fadeOut">Beware</div>').delay(2000).fadeOut();
If you need a pure CSS solution try this
#errMsg {
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
to {
opacity:0
}
}
<div id='errMsg'>This is will hide after 5 seconds</div>
You can use the css transition property transition-delay:
.element {
transition-delay: 3s;
}
Here is a list of applicable transition properties:
/* property name | duration | timing function | delay */
transition: all 4s ease-in-out 1s;
You can read more about transition delays here:
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay
Here's a fiddle to play with: https://jsfiddle.net/qgchhn99/
I'm trying to delay an animation as well as a transition but it doesn't work for some reason. The animation and the opacity transition runs instantly instead of waiting 4 seconds.
I got a status message which appears when a form is submitted (the classes gets added dynamically):
<p class="success success--auto-hide">Some message</p>
Then I have this animation which will hide the element after 4 seconds:
#-webkit-keyframes cssAnimation {
to {
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
}
#keyframes cssAnimation {
to {
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
}
However, I also want the hiding to be smooth so I added a transition on opacity as well as the hiding animation:
.success {
color: green;
opacity: 1;
-webkit-transition-delay: 4s;
transition-delay: 4s;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
.success--auto-hide {
opacity: 0;
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation: cssAnimation 0s ease-in 4s forwards;
-moz-animation: cssAnimation 0s ease-in 4s forwards;
-o-animation: cssAnimation 0s ease-in 4s forwards;
animation: cssAnimation 0s ease-in 4s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
I'm sure I'm close to having it correct, so how should I modify it so that both the animation and transition waits 4 seconds before it executes?
With the .success--auto-hide class you've already hidden the element before the animation begins, with 'opacity: 0;'.
When you remove it, it works fine!
Also, you're giving the delay time now two times, so you can also remove the animation-delay property.
See here: http://codepen.io/anon/pen/WvKjWY
I managed to solve it by increasing the animation duration from 0s to 4s. Having it at 0 caused the hiding animation to execute instantly, thus preventing the opacity transition to run in parallel with the animation. I also decreased the opacity duration to 3s instead of 4s to allow it to be completely hidden before setting the width and height to 0, which would cause the text to jump down in an oddly fashion for a split second before it became completely hidden.
I also realised that I had already set the delay in the shorthand so I could remove the animation-delay property altogether.
.success {
color: green;
opacity: 1;
-webkit-transition-delay: 3s;
transition-delay: 3s;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
.success--auto-hide {
opacity: 0;
-webkit-animation: cssAnimation 4s ease-in 4s forwards;
-moz-animation: cssAnimation 4s ease-in 4s forwards;
-o-animation: cssAnimation 4s ease-in 4s forwards;
animation: cssAnimation 4s ease-in 4s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
For hiding an element after 5 seconds, I have used below code.
But it does not work in Firefox.
.classname {
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
-moz-animation: cssAnimation 0s ease-in 5s forwards;
-o-animation: cssAnimation 0s ease-in 5s forwards;
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
#-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
<div class="classname">This will hide</div>
There are some issues with the code above:
The animation is not the same for all browsers: one is animating the visibility (webkit), the other one is animation the overflow (standard).
The overflow property is not animatable.
Firefox has a history of issues with the visibility property (this is not your fault but a problem of Firefox itself, you can find many questions on SO related to it).
Because of the way in which you are running the animation (with a duration of 0s), you can trick Firefox by using the from in the CSS animation. The thing is that Firefox is not animating the visibility, but it will apply the style in the from part of the animation anyway, so you'll get the desired effect.
.classname {
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
-moz-animation: cssAnimation 0s ease-in 5s forwards;
-o-animation: cssAnimation 0s ease-in 5s forwards;
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
from {
visibility:hidden;
}
to {
width:0;
height:0;
visibility:hidden;
}
}
#-webkit-keyframes cssAnimation {
from {
visibility:hidden;
}
to {
width:0;
height:0;
visibility:hidden;
}
}
<div class="classname">This will hide</div>
If the duration of the animation was higher than 0 seconds, this solution wouldn't work; but as the change is automatic, it works fine (and it will not affect the rest of the browsers).
The advantages of this solution:
The behavior is the same in all the browsers.
The hidden text is not selectable.
The disadvantages:
This is a workaround and not how things should be done.
It does not work if the duration of the effect is higher than 0s.
Try to use fixed width and height for your block (in % or px) and opacity instead visibility — http://jsfiddle.net/sergdenisov/wek6x4Ln/11/:
.classname {
width: 200px;
height: 50px;
-webkit-animation: css-animation 0s ease-in 5s forwards;
animation: css-animation 0s ease-in 5s forwards;
}
#-webkit-keyframes css-animation {
to {
width: 0;
height: 0;
opacity: 0;
}
}
#keyframes css-animation {
to {
width: 0;
height: 0;
opacity: 0;
}
}
I got a css slideshow off the net and installed it , the demo had 8 images in it but i only wanted 3 , so i've have tried this a 100 times to get it working , but i simply can't
I set up a jsfiddle for the initial version - http://jsfiddle.net/jyfcm4jh/ which works perfectly.
And also set one up for the modified version , with only 3 images displaying , but you can see there is a blank space appearing before each image slides to the next
http://jsfiddle.net/jyfcm4jh/1/
Here is my css i edited for only 3 images
.css-slideshow img:nth-child(1) {
-webkit-animation:xfade 15s 10s infinite;
-moz-animation:xfade 15s 10s infinite;
-ms-animation:xfade 15s 10s infinite;
-o-animation:xfade 15s 10s infinite;
animation:xfade 15s 10s infinite;
}
.css-slideshow img:nth-child(2) {
-webkit-animation:xfade 15s 5s infinite;
-moz-animation:xfade 15s 5s infinite;
-ms-animation:xfade 15s 5s infinite;
-o-animation:xfade 15s 5s infinite;
animation:xfade 15s 5s infinite;
}
.css-slideshow img:nth-child(3) {
-webkit-animation:xfade 15s 0s infinite;
-moz-animation:xfade 15s 0s infinite;
-ms-animation:xfade 15s 0s infinite;
-o-animation:xfade 15s 0s infinite;
animation:xfade 15s 0s infinite;
}
The problem comes from your "xfade" percentages (of #keyframes).
Here is how you should choose your values (from this website):
For "n" images You must define:
a=presentation time for one image
b=duration for cross fading
Total animation-duration is of course t=(a+b)*n
animation-delay = t/n or = a+b
Percentage for keyframes:
0%
a/t*100%
(a+b)/t*100% = 1/n*100%
100%-(b/t*100%)
100%
EDIT:
In your case:
a = 4s (each color frame appears during 4s)
b = 1s (the transition lasts 1s)
t = 15s (you chose 15s for the total duration)
So your percentages in CSS should be something like this (for each browser equivalent):
#-webkit-keyframes xfade {
0% {
filter:alpha(opacity=100);
opacity:1;
}
27% {
filter:alpha(opacity=100);
opacity:1;
}
33% {
filter:alpha(opacity=0);
opacity:0;
}
93% {
filter:alpha(opacity=0);
opacity:0;
}
100% {
filter:alpha(opacity=100);
opacity:1;
}
}
And finally, you should remove this CSS property (unless you want a white frame effect for each transition):
/*
.css-slideshow img:nth-child(1),
.css-slideshow img:nth-child(2),
.css-slideshow img:nth-child(3) {
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter:alpha(opacity=0);
opacity:0;
}
*/
You're all set!
JSFIDDLE