I want to fade in my logo at page load. But, I want it to delay. But when I add the delay property, it first shows, and after the delay period it starts the animation. I want the logo to show, after the delay. What am I doing wrong?
Here's the JSFiddle http://jsfiddle.net/c8hx9/
HTML
<div id="show">hello!</div>
CSS
#show {
position: absolute;
left: 50%;
margin-left: -200px;
top: 200px;
margin-bottom: 300px;
animation: fadein 2s;
-moz-animation: fadein 2s;
/* Firefox */
-webkit-animation: fadein 2s;
/* Safari and Chrome */
-o-animation: fadein 2s;
/* Opera */
animation-delay:1s;
-webkit-animation-delay:1s;
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
Just add opacity on the first statement class:
#show {
opacity:0;
}
And to keep the final of the animation use forwards.
animation-fill-mode: forwards;
Check this Demo http://jsfiddle.net/c8hx9/2/
Related
I want to have my website where whenever someone scrolls down, a picture or text will fade in up. I´ve been trying to find a way to accomplish this only using CSS or HTML as my website creator doesn't use any other language besides CSS or HTML. Is there some code that I could use to accomplish this?
Yes, you can do this. It's a lot easier with JQuery, but CSS will still work.
<text id="my-text">I hope this helps</text>
<style>
#my-text {
font-size: 20px;
text-align: center;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
I hope this helps! This would work with images and text.
Test this: https://www.w3schools.com/code/tryit.asp?filename=GCR2PD73HDF7
This question already has answers here:
Stopping a CSS3 Animation on last frame
(8 answers)
Closed 4 years ago.
I have finally made my background image fade in when my webpage loads, and now I want the animation to be a little delayed so you are able to se the background color for a moment.
I have tried to use the "animation-delay: 2s;" thing in css, but when the page loads, the image is already shown and the animation just starts after 2 seconds. This means that the image is shown, then disappears and then do the animation. I then tried to set the image to "opacity: 0;", but then problem just turns around. So now the image isn't shown to begin with, then the animation tuns, but after that the image disappears again
html:
<div class="imageThing">
</div>
css:
/* attempt 1 */
.imageThing {
background: #fff url('image') 0px 0px no-repeat ;
background-size: 100vw 30.15vw;
-webkit-animation: fadein 3s; /* Safari and Chrome */
-moz-animation: fadein 3s; /* Firefox */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera */
animation: fadein 3s;
animation-delay: 2s;
height: 30.15vw;
width: 100vw;
position: absolute; top: 0px; left: 0px;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari and Chrome */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* attempt 2 */
.imageThing {
background: #fff url('image') 0px 0px no-repeat ;
opacity: 0;
background-size: 100vw 30.15vw;
-webkit-animation: fadein 3s; /* Safari and Chrome */
-moz-animation: fadein 3s; /* Firefox */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera */
animation: fadein 3s;
animation-delay: 2s;
height: 30.15vw;
width: 100vw;
position: absolute; top: 0px; left: 0px;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari and Chrome */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
I need the image to be invisible until a number of seconds after the page loads until the animation begins, and then stay visible. I hobe you can help me :)
You can add animation-fill-mode: both to hold the animation before and after.
.imageThing {
animation-fill-mode: both;
}
The fadeout animation is not working. I think you can't put two Ids on one div.
How do you get the fadeout to work?
here is the jsFiddle
html
appear
<div id="pop" id="pop_close">
disappear
</div>
CSS
body {
padding: 10em;
}
#pop{
height: 10em;
width: 10em;
background: yellow;
opacity:0;
position: relative;
top: -20px;
z-index: -1;
}
#pop:target {
opacity: 1;
z-index: 1;
-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s; /* Firefox < 16 */
-ms-animation: fadein 1s; /* Internet Explorer */
-o-animation: fadein 1s; /* Opera < 12.1 */
animation: fadein 1s;
}
#pop_close:target {
opacity: 0;
z-index: -1;
-webkit-animation: fadeOut 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadeOut 1s; /* Firefox < 16 */
-ms-animation: fadeOut 1s; /* Internet Explorer */
-o-animation: fadeOut 1s; /* Opera < 12.1 */
animation: fadeOut 1s;
}
#keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Firefox < 16 */
#-moz-keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Internet Explorer */
#-ms-keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
#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; }
}
here is a working fiddle http://jsfiddle.net/oogley_boogley/wqju9jh6/19/
the css:
#pop{
height: 10em;
width: 10em;
background: yellow;
opacity:0;
position: relative;
top: -20px;
z-index: -1;
transition: opacity 1s; /* key style here, look into -webkit and -moz etc as well */
}
Exactly, you cannot have multiple ID on the same page,
therefore you need to modify the ID to make :target a specific popup:
div[id^=popUp] // means: target DIV element who's ID "starts with".
than in the HTML you simply make the ID unique by adding a number.
div[id^=popUp]{
height: 5em;
width: 5em;
background: yellow;
opacity:0;
position: relative;
top: -20px;
z-index: -1;
transition: opacity 1s;
}
div[id^=popUp]:target {
opacity: 1;
z-index: 1;
}
appear
<div id="popUp1">
disappear
</div>
appear
<div id="popUp2">
disappear
</div>
I currently have the following code which fades in the header. I want the header to stay for about 3 seconds, then fadeout, automatically loading the main page of the website. It seems its quite difficult to do that. Can anyone help?
.fade1 {
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Try this...The animation duration should be 7 seconds
It fades in over 2 secs, stays for 3 seconds and then fades out over 2 seconds
#keyframes fadein {
0% { opacity: 0; }
29% { opacity: 1; }
72% {opacity:1;}
100% {opacity:0;}
}
JSfiddle Demo (Chrome)
As the title suggest, I'm trying to make a pure CSS drop down menu. The only thing is I cannot get the dropdown to fade in slowly no matter what I've tried.
Here's the JSFiddle
http://jsfiddle.net/UWgCV/
FYI It's not my terrible code, it's from the previous designer who abandoned the project.
Thanks.
edit: I need to accompany this post with code because of the jsfiddlet link, so here is the menu.
<li>EMERGENCY SERVICE |
<ul>
<li> What We Do</li>
<li> How We Are Staffed</li>
<li> Emergency/Referral Procedure </li>
<li> Types of Emergencies</li>
<li> What to Expect On Arrival</li>
</ul>
</li>
You should use CSS3 Animations, although they aren't supported in all browsers such as <=IE9, this is exactly what they were made for. You may want to try jQuery for older browsers.
Workign demo JSFiddle
li:hover > ul {
display: block;
opacity: 0;
z-index: 98;
position: absolute;
-webkit-animation: fadein 2s; /* Safari and Chrome */
-moz-animation: fadein 2s; /* Firefox */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari and Chrome */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}