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; */
}
Related
#-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.
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! :)
I want to loop this text ads banner using css keyframes.
first shown text1
second added text2 (text1 stays there)
third added button (text1 and text2 also stays there)
then disappear 3 of them
and again shown text1
second added text2 (text1 stays there)
third added button (text1 and text2 also stays there)
How can I repeat(loop) these action?
If I have infinite in -webkit-animation, I can loop only one element.
Can anyone help please?
Here is my code http://jsfiddle.net/ddpatty/Ng3Qf/
.lg-text-1 {
-webkit-animation: txt-animation 0.8s 1 ease-in-out;
}
.lg-text-2 {
-webkit-animation: txt-animation 1.5s 0.8s 1 ease-in-out;
}
.button {
-webkit-animation: btn-animation 2s 0.3s 1 ease-in-out;
}
#-webkit-keyframes txt-animation {
0% {opacity: 0;}
80% {opacity: 0.8;}
100% {opacity: 1;}
}
#-webkit-keyframes btn-animation {
0% {opacity: 0;}
80% {opacity: 0;}
100% {opacity: 1;}
}
As I said in the comment, you have to use different keyframes for each animation. Then you have full control over the delay between animation, the point is all the durations are the same, so you have a perfect cycle. Note that using the animation-delay will make each animation have its own cycle (with the same duration). You can try tweaking it to make the total of delay time and duration of all the animations equal but the adjustment is very hard to do. I would create different keyframes (as well as animations) for each element. Here is the code (for webkit-only):
.lg-text-1 {
-webkit-animation: txt-animation1 3s infinite ease-in-out;
}
.lg-text-2 {
-webkit-animation: txt-animation2 3s infinite ease-in-out;
}
.button {
/*....*/
-webkit-animation: btn-animation 3s infinite ease-in-out;
}
#-webkit-keyframes txt-animation1 {
0%, 20% {opacity: 0;}
60% {opacity: 0.8;}
100% {opacity: 1;}
}
#-webkit-keyframes txt-animation2 {
0%, 40% {opacity: 0;}
60% {opacity: 0.8;}
100% {opacity: 1;}
}
#-webkit-keyframes btn-animation {
0%, 60% {opacity: 0;}
80%, 100% {opacity: 1;}
}
Updated demo
I'm pretty sure you can not restart the animation onclick by using CSS alone. You will need to use jquery/javascript.
DEMO http://jsfiddle.net/Ng3Qf/1/
$("a").click(function () {
var el = $('#one'),
newone = el.clone(true);
el.before(newone);
$("." + el.attr("class") + ":last").remove();
var el2 = $('#two'),
newone2 = el2.clone(true);
el2.before(newone2);
$("." + el2.attr("class") + ":last").remove();
});
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;
}