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)
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;
}
I'd like to animate 2 images with css whereby 1 starts and stays for 5 secs and the other follows and they both stay for 5 more seconds together and it all starts again in an infinite loop. I'm doing it once but once it goes through the first loop, they all animate at the same time without the second images delay. Please view my code below:
CSS:
img.coke {
position: relative;
animation-name: FadeInOut;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
img.fanta {
position: relative;
opacity:0;
animation-name: FadeIn;
animation-duration: 5s;
animation-delay: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes FadeInOut {
0% {
opacity:0;
}
50% {
opacity:1;
}
100% {
opacity:1;
}
}
#keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
HTML:
<div id ="imgo">
<img class = "coke" src="http://media.wktv.com/images/AP_985452110986.png" />
<img class ="fanta" src="http://www.coca-colaproductfacts.com/content/dam/productfacts/us/productDetails/ProductImages/Fanta_12.png" />
</div>
As you have noted the animation-delay just works onces to delay the time the animation starts:
Specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.
But you can use the logic you already have controlling the opacity state based on the % of the animation:
img {
max-height: 200px;
}
img.coke {
position: relative;
animation: FadeInOut 2s infinite alternate ease-in-out;
}
img.fanta {
position: relative;
opacity: 0;
animation: FadeIn 2s infinite alternate ease-in-out;
}
#keyframes FadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes FadeIn {
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="imgo">
<img class="coke" src="http://media.wktv.com/images/AP_985452110986.png" />
<img class="fanta" src="http://www.coca-colaproductfacts.com/content/dam/productfacts/us/productDetails/ProductImages/Fanta_12.png" />
</div>
.coke {
height: 100px;
opacity: 0;
-webkit-animation: example1 10s infinite; /* Safari 4+ */
-moz-animation: example1 10s infinite; /* Fx 5+ */
-o-animation: example1 10s infinite; /* Opera 12+ */
animation: example1 10s infinite; /* IE 10+, Fx 29+ */
}
.fanta {
height: 100px;
opacity: 0;
-webkit-animation: example2 10s infinite; /* Safari 4+ */
-moz-animation: example2 10s infinite; /* Fx 5+ */
-o-animation: example2 10s infinite; /* Opera 12+ */
animation: example2 10s infinite; /* IE 10+, Fx 29+ */
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example1 {
10% {opacity: 0;}
15% {opacity: 1;}
100% {opacity: 1;}
}
/* Standard syntax */
#keyframes example1 {
10% {opacity: 0;}
15% {opacity: 1;}
100% {opacity: 1;}
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example2 {
45% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 1;}
}
/* Standard syntax */
#keyframes example2 {
45% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 1;}
}
Try to manipulate animation percentages
Example: https://jsfiddle.net/o4226gmd/
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; }
}
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/