I want to fade out an element after 3 seconds. I'm currently using an animation to do this but I've just learned of transition-delay, so I believe I may be able to remove the animation and do it through a transition. Is this possible?
My original code is:
.foo {
animation: fadeOut 3s cubic-bezier(0.645, 0.045, 0.355, 1.000)
}
#keyframes fadeOut {
80%{
opacity: 1
}
100% {
opacity: 0
}
}
Here is my attempt at a transition:
.announcement {
display: block;
font-size:22px;
transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition-delay :3s;
opacity:0;
}
<div class="announcement">asdasd</div>
http://jsbin.com/vejewukusi/edit?html,css,output
Is this possible without adding another CSS class?
Just to make things more clear, I want to append a div with a class, wait 3 seconds, and then fade it out, and do this without using keyframes.
Does this solve your problem: JSFiddle? I have added an animation and a little function to animate the opacity:
.test {
animation: opacity 1s;
}
#keyframes opacity {
from { opacity: 0.5; }
to { opacity: 1; }
}
Related
I want to have the beginning animation on load and then on :hover to add another animation. The problem is, after I leave the element(not hovering) it goes back to its first animation and repeats it.
Is there any way to avoid this from happening?
Problem video :
https://youtu.be/uCZdo4FsCj8
Code :
.char {
animation: slide-down 2s forwards cubic-bezier(0, 1.18, .82, 1.02);
animation-delay: calc(0s + (0.1s * var(--char-index)));
animation-iteration-count: 1;
opacity: 1;
#keyframes slide-down {
from {
transform: translate(-125%, 125%);
opacity: 1;
}
to {
transform: translate(0%);
opacity: 1;
}
}
&:hover {
animation: newAnim 0.4s forwards linear;
color: red;
#keyframes newAnim {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}
}
}
You cannot do it without using JavaScript. When :hover happens, the animation-iteration-count gets reset. This in turn causes the first animation to repeat after letting go of hovering. So you will have to use some JavaScript to get it working.
Have you considered using the animation just for the initial movement, and transitions for the :hover effect? This way, the animation-iteration-count is not reset after unhovering. Essentially add the following css code:
.char {
...your animations for initial loading
transition: color 0.4s linear, transform 0.4s linear;
}
.char:hover {
transform: scale(1.2);
color: red;
}
An example of such solution can be found in this codepen.
It looks so simple but I can handle to make it work.
When a new element is added to my list, I want the others elements to move to let the space for the new one and then the new one has to appear with a fade transition.
I can't make this simple animation. I can make the others elements to move but my new element does not have any fade transition. It just appears! BIM.
Here's a codepen : https://codepen.io/MuyBien/pen/OEqNEQ
.fade-enter-active {
transition: opacity .3s ease-out;
transition-delay: .3s;
}
.fade-enter {
opacity: 0;
}
.fade-enter-to {
opacity: 1;
}
.fade-move {
transition: transform .3s;
}
.fade-enter-active {
transition: opacity 1s ease-out;
transition-delay: 1s;
}
.fade-enter {
opacity: 0;
}
.fade-enter-to {
opacity: 1;
}
.fade-move {
transition: transform 1s;
}
You can just delay the entry.
I am setting my CSS animation type to forwards so that the finished frame of the animation is the default state when finished.
But now, the transition that animates the same property (transform) is not working anymore...
I have to use forwards because otherwise the opacity resets to 0 after animating.
How can I enable a transition as soon as an animation has finished? I am looking for a CSS-only option without javascript.
CSS
album {
opacity: 0;
animation:movein 0.6s forwards;
transition: all 0.3s ease-in-out;
}
album:hover {
transform:scale(1.05); // this doesn't work
box-shadow: 0px 0px 45px rgba(0,0,0,0.5); // this works
}
#keyframes movein {
from {
opacity:0;
transform: translateX(-100px);
}
to {
opacity:1;
transform: translateX(0px);
}
}
album:nth-child(2) {
animation-delay: 0.2s; // delay keeps opacity 0 for a while
}
album:nth-child(3) {
animation-delay: 0.4s; // delay keeps opacity 0 for a while
}
One solution could be to split up your animation. Only the fadein animation has animation forwards.
album {
opacity: 0;
animation:movein 0.6s, fadein 0.6s forwards;
transition: all 0.3s ease-in-out;
}
#keyframes movein {
from {
transform: translateX(-100px);
}
to {
transform: translateX(0);
}
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
I have an element which functions as a tri-state checkbox. I want to run an animation on that element whenever the state changes. Essentially, the element starts with no classes attached to indicate the first state. Then I add a class for one state, then remove that class and add a different one for the second state.
It works on the first click but the animation doesn't play on subsequent clicks. Here's what I have so far:
$('button').click(function() {
var $div = $('div');
if (!$div.hasClass('is-colored')) {
$div.addClass('green is-colored');
} else {
$div.toggleClass('green red');
}
});
#keyframes Animation {
from {
opacity: 0;
transform: scaleX(0) scaleY(0);
}
to {
opacity: 1;
transform: scaleX(1) scaleY(1);
}
}
.green {
background-color: #0F0;
-webkit-animation: Animation 0.25s linear forwards;
-moz-animation: Animation 0.25s linear forwards;
animation: Animation 0.25s linear forwards;
}
.red {
background-color: #F00;
/* I tried applying the animation on the second state but this isn't working */
-webkit-animation: Animation 0.25s linear forwards;
-moz-animation: Animation 0.25s linear forwards;
animation: Animation 0.25s linear forwards;
}
div {
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<button>Change Color</button>
I know it's possible to restart an animation with JavaScript and as of 3 years ago it didn't seem to be possible to do this without JavaScript.
In short, is it possible to perform the same animation on the same element multiple times using only CSS and toggling classes (i.e, no timeout required)?
What's happening is because the state never gets a reset so the animation doesn't kick in again. What you want to do is remove the color class as it resets, "wait" (0 seconds) then have the new class kick in for the animation.
The change is like this for green, see below for full changes:
$div.removeClass('green');
setTimeout(function() {
$div.addClass('red');
}, 0);
Edit: To do this without javascript delay. The only way is to create another version of the animation so it constantly runs a different animation:
$('button').click(function() {
var $div = $('div');
if (!$div.hasClass('is-colored')) {
$div.addClass('green is-colored');
} else {
$div.toggleClass('green red');
}
});
#keyframes Animation {
from {
opacity: 0;
transform: scaleX(0) scaleY(0);
}
to {
opacity: 1;
transform: scaleX(1) scaleY(1);
}
}
#keyframes Animation2 {
from {
opacity: 0;
transform: scaleX(0) scaleY(0);
}
to {
opacity: 1;
transform: scaleX(1) scaleY(1);
}
}
.green {
background-color: #0F0;
-webkit-animation: Animation 0.25s linear forwards;
-moz-animation: Animation 0.25s linear forwards;
animation: Animation 0.25s linear forwards;
}
.red {
background-color: #F00;
/* I tried applying the animation on the second state but this isn't working */
-webkit-animation: Animation2 0.25s linear forwards;
-moz-animation: Animation2 0.25s linear forwards;
animation: Animation2 0.25s linear forwards;
}
div {
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<button>Change Color</button>
I am attempting to animate an element from display:none;opacity:0; to display:block;opacity:1;. While the below animation works, when I introduce a delay into the animation I find I cannot set the delay value higher than the animation duration value. When I do, the animation is ignored.
How do I set my delay to take e.g. 2 seconds and my animation duration to be 300ms without it breaking?
div p + p {
display: none;
opacity: 0;
}
div p:hover + p {
display: block;
opacity: 1;
/* browser prefixes removed for brevity */
-webkit-animation: fadeInFromNone 300ms 900ms linear;
animation: fadeInFromNone 300ms 900ms linear;
}
div.working p:hover + p {
display: block;
opacity: 1;
/* browser prefixes removed for brevity */
-webkit-animation: fadeInFromNone 300ms 300ms linear;
animation: fadeInFromNone 300ms 300ms linear;
}
#-webkit-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block ;
opacity: 0;
}
100% {
display: block ;
opacity: 1;
}
}
keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block ;
opacity: 0;
}
100% {
display: block ;
opacity: 1;
}
}
<div>
<p>Hover on me (broken)</p>
<p>Peek-a-boo</p>
</div>
<div class="working">
<p>Hover on me (working)</p>
<p>Peek-a-boo</p>
</div>
This boils down to a timing issue.
Initially the p has display:none; and opacity:0;. On hover the p has display:block; and opacity:1;, and then, after the delay, this is reset to display:none; and opacity:0; when the animation starts.
By setting the hover p to have display:block; and animating only the opacity, then I almost get the desired result. To stop the animation from completing and setting the p as opacity:0 again I add the forwards attribute to the animation:
div p + p {
display: none;
opacity: 0;
}
div p:hover + p {
display: block;
/* browser prefixes removed for brevity */
-webkit-animation: fadeInFromNone 300ms linear 900ms forwards;
animation: fadeInFromNone 300ms linear 900ms forwards;
}
#-webkit-keyframes fadeInFromNone {
from { opacity:0; }
to { opacity:1; }
}
keyframes fadeInFromNone {
from { opacity:0; }
to { opacity:1; }
}
<div>
<p>Hover on me</p>
<p>Peek-a-boo</p>
</div>
Why am I using an animation for opacity when I could use a transition? My main reason for doing an animation was to get display:block/none to work, but in my other answer it still doesn't work as I want it to. In this answer I am using visibility:hidden/visible and opacity:0/1 for the animation. The transition is so on hover that the transition takes 1 second to start (note transition-delay on the hover code), while on mouse-out the opacity will fade out first over nearly a second and the visibility will just stop being visible BUT it has a delay of the same amount as the opacity duration.
This gives me the lovely delayed fade-in / immediate fade-out that I wanted.
div p + p {
visibility:hidden;
opacity: 0;
/* browser prefixes removed for brevity */
transition:visibility 0s linear 900ms, opacity 900ms linear;
}
div p:hover + p {
visibility:visible;
opacity:1;
/* browser prefixes removed for brevity */
transition-delay:1s;
}
<div>
<p>Hover on me</p>
<p>Peek-a-boo</p>
</div>