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);}
}
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.
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 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 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