My Code for showing divs with fade-in effect is as here
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
animation-duration:2s;
}
.fade-in.one
{
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
animation-delay: 1.7s;
}
Then i am using that to a div which needs to fade in while loading.
<div class="fade-in one">
<label>Message Box</label>
This box will show some messages
</div>
This code works fine in chrome and firefox as well, but in ie it is showing no animation.
Kindly help in fixing this problem. I have tried many changes in the code, and IE versions as well. But no joy. Please help ....
Related
This is my first question on this platform.
I am trying to make anki card that shows a question for a number of seconds then I need it to fade out.
this is the code that I have found.
#-webkit-keyframes fadeIn {
100%,0%{opacity:.5;}
0%,0%{opacity:1;}
}
.fade-out {
font-size:20px;
color: dodgerblue;
background:white;
padding:10px;
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-webkit-animation-duration:2s;
-webkit-animation-delay:4s;
This kind of stuff is usually easy to just google, but anyways this is a solution that will work perfectly
.fader {
animation: fadeOut ease 8s;
-webkit-animation: fadeOut ease 8s;
-moz-animation: fadeOut ease 8s;
-o-animation: fadeOut ease 8s;
-ms-animation: fadeOut ease 8s;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-ms-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
<h1 class="fader">
Hey!
</h1>
You can make an animation with the #keyframes tag. For instance
#keyframes fade-out {
100%{
opacity: 0%;
}
}
and then also in your CSS you have something like this:
.your-class{
animation: fade-out 3s linear 10s 1;
animation-fill-mode: forwards;
}
And then in your HTML you have this:
<div class="your-class">What is 1+1?</div>
The values in the CSS mean that the "fade-out" animation will be played in a 3s time and a linear animation. The 10s mean that after 10s the animation will play, so it means that the card will disappear after 10s. and the "1" means it will only play 1 time, this is optional since 1 is the default value.
animation-fill-mode means that the value that's in the animation (opacity: 0%) will remain and only goes away when you refresh the page for instance. It will overtake the default value which is normally 100%;
Hoped this helped you.
I'm not very familiar with css nor css animations. I have made a fade-in animation for some pictures. They do work great, but not on an old Safari browser.
A friend of mine uses Safari 5.1.10 and the pictures don't get displayed.
What can I do that it will play the animation or how can I tell the browser "if you're too old for that stuff then just ignore the animation and display the pictures"?
And here is the css:
.column-image > div picture > img{
opacity: 0;
animation-name: fadein;
animation-duration: 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#c1163 > div > div:nth-child(2) > div picture > img{
animation-delay: 0.5s;
}
#c1163 > div > div:nth-child(6) > div picture > img{
animation-delay: 1s;
}
#c1163 > div > div:nth-child(7) > div picture > img{
animation-delay: 1.5s;
}
#c1163 > div > div:nth-child(11) > div picture > img{
animation-delay: 2s;
}
#c1163 > div > div:nth-child(12) > div picture > img{
animation-delay: 2.5s;
}
#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;
}
}
#-o-keyframes fadein {
from {
opacity:0;
}
to {
opacity: 1;
}
}
This is because you need to add vendor prefixes to the animation attributes because in older versions they're considered 'experimental'. Check out the support for Animations on Can I Use? Safari 5.1 requires the -webkit- prefix.
You code should work when changed to the following:
.column-image > div picture > img{
opacity: 0;
animation-name: fadein;
animation-duration: 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-animation-name: fadein;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
#c1163 > div > div:nth-child(2) > div picture > img{
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
#c1163 > div > div:nth-child(6) > div picture > img{
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
#c1163 > div > div:nth-child(7) > div picture > img{
animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
}
#c1163 > div > div:nth-child(11) > div picture > img{
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
#c1163 > div > div:nth-child(12) > div picture > img{
animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
#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;
}
}
#-o-keyframes fadein {
from {
opacity:0;
}
to {
opacity: 1;
}
}
The opacity attribute is okay and has pretty good support and that does not have a prefix to add. There are other vendor prefixes for other browsers too as you've used already, but you'll be fine with just the webkit prefix for the animation ones (keep the prefixed keyframe prefixes though).
I've got this CSS:
#-webkit-keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#slider {
background-size: cover;
position: fixed;
top: 100px;
bottom: 0px;
height:calc(100%-135px);
width: 100%;
}
#slider img {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin: 0px;
width: 100%;
height: 100%;
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#slider img {
-webkit-animation-name: sliderFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-moz-animation-name: sliderFadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;
-o-animation-name: sliderFadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;
animation-name: sliderFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
#slider img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
#slider img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#slider img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
#slider img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
I'm learning CSS Animations, but I didn't find out how to set the display time of one image.
I tried to change the animation delay but that only causes trouble..
Do you have an idea how to do this ?
Best regards
There were several things that needed some attention. Here's how I accomplished it, though there are other ways.
For the animation itself:
#keyframes sliderFadeInOut {
0% {
opacity:0;
}
17% {
opacity:1;
}
25% {
opacity:1;
}
92% {
opacity:1;
}
100% {
opacity:0;
}
}
This causes the image to fade in, then fade out at whatever animation-duration we set.
Set the animation-iteration-count to 1, so the animation runs once.
animation-iteration-count: 1;
Each image in the stack needs to be timed to appear, then disappear as the next image in the stack becomes visible. To do this, use animation-delay and increase it for each image in the stack.
#slider img:nth-child(1) {
animation-delay: 0s;
}
#slider img:nth-child(2) {
animation-delay: 4s;
opacity:0;
}
#slider img:nth-child(3) {
animation-delay: 8s;
opacity:0;
}
#slider img:nth-child(4) {
animation-delay: 12s;
opacity:0;
}
The staggered animation-delay properties cause the first image in the stack to be shown initially. It's animation takes 5 seconds and results in the image disappearing. At 4 seconds, the 2nd image in the stack starts it's animation, appearing just as the first image is disappearing. And then so on for the 3rd and 4th images.
In the code above there's also an initial opacity property for the 2nd, 3rd and 4th images. This is necessary to hide them initially.
As it's setup now the images will loop only once. Some minor tweaking to animation-delay and animation-iteration-count would cause it to loop infinitely.
Here's the working demo.
I am using a css code to fade in and then fade out an html div, and after a delay, fade in another div. However, after the second div fades in and the code ends, the first div reappears. The code I am using is posted below. I wanted to know how to make sure the first div dosent reappear after the code ends.
.text {
-webkit-animation: fadein 5s
}
#-webkit-keyframes fadein {
0% {
opacity: 0;
}
35% {
opacity: 1;
}
72% {
opacity:1;
}
100% {
opacity:0;
}
}
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.bdy {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.bdy {
-webkit-animation-delay: 4.5s;
-moz-animation-delay: 4.5s;
animation-delay: 4.5s;
}
HTML:
<header>
<div class="text_paragraph">
<h1>DEMO</h1>
<h3>Secondary School</h3>
<h3>Grade</h3>
</div>
<div class="bdy">
<h1>hi</h1>
</div>
</header>
You can do something like this ... here is a jsFiddle
Obs: Add the other css selectors besides -webkit- to make it cross-browser
CSS
.text_paragraph {
-webkit-animation: fadeInOut 2s;
opacity:0;
}
.bdy {
-webkit-animation:fadeIn 3s;
}
#-webkit-keyframes fadeInOut{
0% {
opacity: 0;
}
35% {
opacity: 1;
}
72% {
opacity:1;
}
100% {
opacity:0;
}
}
#-webkit-keyframes fadeIn{
0% {
opacity: 0;
}
75% {
opacity:0;
}
100% {
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/