#-webkit-keyframes fadein {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadein {
from {opacity: 0;}
to {opacity: 1;}
}
#-moz-keyframes fadein {
from {opacity: 0;}
to {opacity: 1;}
}
.animated-div {
-webkit-animation: fadein 4s 1 forwards;
-moz-animation: fadein 4s 1 forwards;
animation: fadein 4s 1 forwards;
}
<div class="animated-div">hello</div>
Keyframes does not work and item does not fadein on the page, how to be?
I tried different combinations of prefixes, does not help. In Chrome, Opera working fine.
Deleting opacity: 0!important really help,but i dont know how it was animate in Chrome and Opera even with opacity: 0!important. Thanks all.
Related
I have a question that might sound stupid, but here it goes anyways.
For starters, here is the website I'm creating.
www.redshedproductionsllc.com
I have an animation running on an h1 element on my website that fades in after a delay. The problem was is that the text showed before the animation started, so it kind of had a glitchy start. I found a workaround that works flawlessly on chrome, but not on any other browser. The element simply stays hidden. Here is my CSS.
#fading1 {
animation: fadein 4s;
-moz-animation: fadein 4s; /* Firefox */
-webkit-animation: fadein 4s; /* Safari and Chrome */
-o-animation: fadein 4s; /* Opera */
}
#fading2 {
visibility: hidden;
animation: fadein 4s;
-moz-animation: fadein 4s; /* Firefox */
-webkit-animation: fadein 4s; /* Safari and Chrome */
-o-animation: fadein -4s; /* Opera */
-moz-animation-delay: 2s;
-webkit-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
-moz-animation-fill-mode: forwards; /*FF 5+*/
-webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/
-o-animation-fill-mode: forwards; /*Not implemented yet*/
-ms-animation-fill-mode: forwards; /*IE 10+*/
animation-fill-mode: forwards; /*when the spec is finished*/
}
Check it out on chrome, then check it out on firefox or safari. Chrome fades in flawlessly, while the other two stay hidden. Please help!!!
First of all, there is no such thing as moz-prefixed animation-delay. Having -moz-animation-delay: 2s is unneccessary. I'm not sure why it is working in chrome and not Firefox, but I have a feeling that the animation of visibility doesn't work well in all browsers.
It would make more sense to me to fade it in from opacity: 0 to opacity: 1 over three seconds, but make the first two seconds the delay, keeping the opacity at 0.
#keyframes fadein {
0% {opacity: 0;}
66% {opacity: 0;}
100% {opacity: 1;}
}
#-webkit-keyframes fadein {
0% {opacity: 0;}
66% {opacity: 0;}
100% {opacity: 1;}
}
.fade{
opacity: 1;
-moz-animation: fadein 3s;
animation: fadein 3s;
width: 100px;
height: 100px;
background: blue;
}
JSFiddle
I am not very sure but you have to use something like this:
So the thing is, you have to specify certain functions of CSS for each and every browser, so you should do like this:
#-webkit-keyframes fadein {
0% {opacity: 0;}
66% {opacity: 0;}
100% {opacity: 1;}
-moz-boxshadow
Read MDN guides for these prefixes.
Hope it helps! :)
Urg! I'm using a WordPress plugin to create boxes with an opacity effect upon hover but it doesn't seem to work on Chrome or IE and instead they fades to opacity: 1 (100%) although I have modified the CSS to opacity: 0.2
Works well on Safari and Firefox but not Chrome or IE. Could this be a webkit issue?
Boxes below the slider: http://goo.gl/5IkgSF
That is because the opacity that you're trying to change is within keyframes so you need to modify the keyframes or add new keyframes to override the plugin's style.
In the animate.css line 517 you can find the following code, change the opacity from 1 to .2 as the following and it will work fine.
#-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: .2;}
}
#-moz-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: .2;}
}
#-o-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: .2;}
}
#keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: .2;}
}
.fadeIn {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
/* opacity: .2; */
}
I'm trying to dissappear Bootstrap Alert after 3seconds. I made it, but it just dissapears and keeps the height of div. Can I remove that div with CSS only? I tried display:none; and it also didn't work. I need help.
This is what I did:
CSS:
.alert-success {
-webkit-animation: fadeOut 3s linear forwards;
animation: fadeOut 3s linear forwards;
}
#-webkit-keyframes fadeOut {
0% {opacity: 1;}
70% {opacity: 1;}
90% {opacity: 1;-webkit-transform: translateY(0px);}
100% {opacity: 0;-webkit-transform: translateY(-30px);}
}
HTML:
<div class="alert alert-success">
Well done! You successfully read this important alert message.
</div>
Thanks in advance
Give this a try!
JSFiddle:
http://jsfiddle.net/Q9kYa/9/
#alert-success{
background-color: #FF0000;
animation:alert-success 0.5s 1;
-webkit-animation:alert-success 0.5s 1;
animation-fill-mode: forwards;
animation-delay:2s;
-webkit-animation-delay:1s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes alert-success{
0% {opacity: 1;}
70% {opacity: 1;}
90% {opacity: 1;-webkit-transform: translateY(0px);}
100% {opacity: 0;-webkit-transform: translateY(-30px);}
}
I'm working on a pure CSS3 crossfader between images. The problem I'm having is that its only two images and when the second image fades out, it fades to white instead of looping straight back to image 1.
My not so working fiddle is here: http://jsfiddle.net/uQU6y/2/
.item img {
position:absolute;
left:0;
top:0;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 6s;
}
#-webkit-keyframes fade {
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
#f2 {
-webkit-animation-delay: -4s;
}
Hi please find the jsfiddle
you had given id="f1" in html but you didn't use it in css.
This uses a very different method, but from the looks of your example it might be exactly what you need. http://jsfiddle.net/ericjbasti/uQU6y/4/ this is a pure css crossfade, that takes advantage of how the current browsers fade background images.
.image1{
background-image:url(http://placehold.it/290x350);
}
.image1:hover{
background-image:url(http://placehold.it/290x350/000000/ffffff);
}
For my quick example all im doing is a hover effect, but you could easily control this through changes to a class name.
1this solution can be improved. If you use real images you will clearly see that there is rough transition initially. That is because you set f2 on 999. Use this instead:
#f1 {
z-index:999;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 10s;
}
Then change the animation bit as follows:
#-webkit-keyframes fade {
0% {opacity: 1;}
20% {opacity: 0;}
33% {opacity: 0;}
53% {opacity: 1;}
100% {opacity: 1;}
}
#keyframes fade {
0% {opacity: 1;}
20% {opacity: 0;}
33% {opacity: 0;}
53% {opacity: 1;}
100% {opacity: 1;}
}
This will transition #f1 instead of #f2 which means the animation is smooth from beginning on.
Well turns out it was a simple fix to the CSS timings and placement of the animation code. The code I had used worked great with 3 images however for 2 I needed to alter the duration of the animation in order to remove the fade to white. I also had to put the animation information (duration, iteration, name etc. )Here's the JSfiddle: http://jsfiddle.net/uQU6y/7/
The key part of the code:
#f2 {
z-index:999;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 10s;
}
I have an animation with css3
#keyframes aia2{
from{ opacity:1}
to{ opacity:0}
}/* similar with other prefixes */
.animate{
-webkit-animation: aia2 5s linear infinite alternate;
-moz-animation: aia2 5s linear infinite alternate;
-ms-animation: aia2 5s linear infinite alternate;
-o-animation: aia2 5s linear infinite alternate;
animation: aia2 5s linear infinite alternate;
}
html
<ul>
<li class="item" id="term1">1</li>
<li class="item" id="term2">2</li>
<li class="item" id="term3">3</li>
</ul>
I need to animate li but it is not working
$(".item").removeClass("animate");
$(specified id).addClass("animate");
I am adding animate class to the an li and removing for other li tags.
I also tried with setTimeout, no use.
how I can get it?
Instead of adding and removing classes change animation play state. using css3 animation-play-state property
reference
https://developer.mozilla.org/en-US/docs/CSS/animation-play-state
Actually, this works. But only once:
CSS
#keyframes myfirst
{
from {opacity: 0;}
to {opacity: 1;}
}
#-moz-keyframes myfirst /* Firefox */
{
from {opacity: 0;}
to {opacity: 1;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
from {opacity: 0;}
to {opacity: 1;}
}
#-o-keyframes myfirst /* Opera */
{
from {opacity: 0;}
to {opacity: 1;}
}
.animate{
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-direction: linear;
-webkit-animation-timing-function: infinite;
}
HTML
<ul>
<li class="item animate" id="term1">1</li>
<li class="item" id="term2">2</li>
<li class="item" id="term3">3</li>
</ul>
Fiddle: http://jsfiddle.net/praveenscience/ACUEg/
and if you use this:
#keyframes aia2{
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 0; }
}
and you could use #-moz-keyframes, #-webkit-keyframes and #-o-keyframes for the different kits
you can find my test here and it's going on forever