This question already has answers here:
CSS Auto hide elements after 5 seconds
(5 answers)
Closed 5 years ago.
I found this question CSS Auto hide elements after 5 seconds
and I need to know how to do the oposite of this.
Basically:
-Page loads with element hidden
-Wait 5 seconds
-Show element
I'm not very good with CSS so Any help would be nice!
#thingtohide {
-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 {
width:0;
height:0;
overflow:hidden;
}
}
#-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
try this simple solution.
#showMe {
animation: cssAnimation 0s 5s forwards;
visibility: hidden;
}
#keyframes cssAnimation {
to { visibility: visible; }
}
<div id='showMe'>Wait for it...</div>
You can also use opacity insted of visibility
#showMe {
animation: cssAnimation 0s 5s forwards;
opacity: 0;
}
#keyframes cssAnimation {
to { opacity: 1; }
}
<div id='showMe'>Wait for it...</div>
You can run something like this. This sets the opacity to 0 and after a few seconds, it ramps it back to 100%. This option allows you to fine tune how quickly you want it to appear, giving you control over how much opacity the element would have and when in the timeframe it would have it.
#showMe {
opacity: 0;
-moz-animation: cssAnimation 5s;
/* Firefox */
-webkit-animation: cssAnimation 5s;
/* Safari and Chrome */
-o-animation: cssAnimation 5s;
/* Opera */
animation: cssAnimation 5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes cssAnimation {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id='showMe'>Wait for it...</div>
Related
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
I've got the code below that I want to make some div bounce. At the moment they don't seem to move at all, where am I going wrong?
Here's a fiddle
#-webkit-keyframes bounceup {
0% { -webkit-transform:translateY(0); }
40% { -webkit-transform:translateY(30px); }
60% { -webkit-transform:translateY(15px); }
}
#keyframes bounceup {
0% { transform:translateY(0); }
40% { transform:translateY(30px); }
60% { transform:translateY(15px); }
}
#-webkit-keyframes bounceleft {
0% { -webkit-transform:translateX(0); }
40% { -webkit-transform:translateX(-30px); }
60% { -webkit-transform:translateX(-15px); }
}
#keyframes bounceleft {
0% { transform:translateX(0); }
40% { transform:translateX(-30px); }
60% { transform:translateX(-15px); }
}
#-webkit-keyframes bounceright {
0% { -webkit-transform:translateX(0); }
40% { -webkit-transform:translateX(30px); }
60% { -webkit-transform:translateX(15px); }
}
#keyframes bounceright {
0% { transform:translateX(0); }
40% { transform:translateX(30px); }
60% { transform:translateX(15px); }
}
.bounceup {
-webkit-animation-name: bounceup 2s infinite;
animation-name: bounceup 2s infinite;
}
.bounceleft {
-webkit-animation-name: bounceleft 2s infinite;
animation-name: bounceleft 2s infinite;
}
.bounceright {
-webkit-animation-name: bounceright 2s infinite;
animation-name: bounceright 2s infinite;
}
The problem seems to be with how you set your animations in your classes. You are using animation-name, but you are declaring more than just the name; you are adding values for animation-iteration-count and animation-duration as well.
Try instead:
.bounceup {
-webkit-animation: bounceup 2s infinite;
animation: bounceup 2s infinite;
}
.bounceleft {
-webkit-animation: bounceleft 2s infinite;
animation: bounceleft 2s infinite;
}
.bounceright {
-webkit-animation: bounceright 2s infinite;
animation: bounceright 2s infinite;
}
Edit:
Seems like #Harry modified his comment and pointed precisely the above. Basically you were trying to use the shorthand version of animation but for the animation-name property.
An alternative solution would be (the non-shorthand version):
.bounceup {
animation-name: bounceup;
-webkit-animation-name: bounceup;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
I made a working copy for you:
-webkit-animation: bounceup 5s infinite;
animation: bounceup 5s infinite;
https://jsfiddle.net/nu78enm3/2/
and a link to the shorthand technique:
http://www.w3schools.com/cssref/css3_pr_animation.asp
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'm playing with some css transitions and setting a different animation-delay for dynamic elements so the css animations are staggered on the page.
Here is the animation
-webkit-animation: bounceInLeft .5s ease-in 0s backwards;
-moz-animation: bounceInLeft .5s ease-in 0s backwards;
animation: bounceInLeft .5s ease-in 0s backwards;
The actual animation is working fine on both ff and chrome but on firefox the animations are correctly delayed in intervals whereas on chrome all the animations happen instantly.
Here is the inline code. This works correctly on firefox
style="animation-delay: 1s;"
This does not work on chrome
style="-webkit-animation-delay: 1s;"
I have specified a delay in the animation rule but I thought that placing one inline would override it, which it does on firefox. Any ideas? Thanks
I just created a jsfiddle replicating you situation and it seems to be honoring the inline delay in chrome for me. Perhaps there is an issue elsewhere. Check out this fiddle, maybe it will help illuminate a separate issue. http://jsfiddle.net/vFKuu/
HTML
<div id="some-div" style="animation-delay: 1s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s;">Hi</div>
Javascript
#some-div
{
width:100px;
height:20px;
background:#f00;
font-family:Arial;
-webkit-animation: cssAnimation .5s ease-in 0s backwards;
-moz-animation: cssAnimation .5s ease-in 0s backwards;
-o-animation: cssAnimation .5s ease-in 0s backwards;
animation: cssAnimation .5s ease-in 0s backwards;
}
#keyframes cssAnimation {
from { transform: translate(50px); }
to { transform: translate(0px); }
}
#-webkit-keyframes cssAnimation {
from { -webkit-transform: translate(50px); }
to { -webkit-transform: translate(0px); }
}
#-moz-keyframes cssAnimation {
from { -moz-transform:translate(50px); }
to { -moz-transform: translate(0px); }
}
#-o-keyframes cssAnimation
{
from { -o-transform: translate(50px); }
to { -o-transform: translate(0px); }
}
I've found something weird. For some reason the only way the inline would override the style rule in chrome is if the animation-delay is a value that is not 0.
It works fine in firefox if the value is 0 just not chrome. I fixed it by changing the initial value of the delay to 1s then overriding it using inline styles.
I found a nice tutorial on css3 transitions by richard bradshaw which can be found at
http://css3.bradshawenterprises.com/cfimg/
I am trying to set up my Master Page (ASP.Net 4) with a div that has 3 images transitioning
Visual Studio 2010 doesn't like the following keyframes directives AT ALL why? I am set on html5 and css3.
#-webkit-keyframes cf3FadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}
#-moz-keyframes cf3FadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}
Here is the animation code;
.logotransitions img.top {
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 18s;
-webkit-animation-direction: alternate;
-moz-animation-name: cf3FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 18s;
-moz-animation-direction: alternate;
}
Those are just the animation definitions... you still need to declare that your targeted elements use that animation :
div {
-webkit-animation : cf3FadeInOut 1s ease infinite;
-moz-animation : cf3FadeInOut 1s ease infinite;
animation : cf3FadeInOut 1s ease infinite;
}
By the way, unless you're targeting only webkit & mozilla browsers, you should update your code (definitions & declarations) to include all the browser vendors :
div {
-webkit-animation : cf3FadeInOut 1s ease infinite; /*webkit*/
-o-animation : cf3FadeInOut 1s ease infinite; /*opera*/
-moz-animation : cf3FadeInOut 1s ease infinite; /*mozzila*/
-ms-animation : cf3FadeInOut 1s ease infinite; /*ie*/
animation : cf3FadeInOut 1s ease infinite; /*no vendor*/
}
/*...*/
#-o-keyframes cf3FadeInOut {/*...*/}
/* ... and so on*/