I have this code in Stylus:
for i in (1..3)
.l:nth-child({i})
opacity (i / 5)
Which outputs:
.l:nth-child(1) {
opacity: 0.2;
}
.l:nth-child(2) {
opacity: 0.4;
}
.l:nth-child(3) {
opacity: 0.6;
}
Which is great, but I want to change this so that the opacity is 0 at the start and to be set after using #keyframes dynamically;
#keyframes o
0%
opacity 0
100%
for i in (1..3)
opacity (i / 5)
Returns, the obviously incorrect:
100% {
opacity: 0.2;
opacity: 0.4;
opacity: 0.6;
}
Not sure how to do this, do I need to use a function? Thanks for your time! The result I want should look like this:
100% {
.l:nth-child(1) {
opacity: 0.2;
}
.l:nth-child(2) {
opacity: 0.4;
}
.l:nth-child(3) {
opacity: 0.6;
}
}
I did it by creating a keyframe for each iteration:
for i in (1..3)
$keyframe-name = (o- + i)
#keyframes {$keyframe-name}
0%
100%
opacity (i/5)
And then animating:
for i in (1..3)
.l:nth-child({i})
opacity 0
animation (o- + i) 0.25s (i/5)s linear forwards
Thanks #DJDavid98 for your comment.
Related
I have an element I would like to fade in and fade out but show for 10 seconds.
.element {
-webkit-animation: fadeinout 2s linear forwards;
transition-delay: 10s;
animation: fadeinout 2s linear forwards;
opacity: 0;
}
#-webkit-keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes fadeinout {
50% { opacity: 1; }
}
I have been trying for a while and think I have completely miss understood something.
UPDATE -----
What I'm trying to do is for the element to fade in over 2 seconds then show for 10 secs then fade out over 2 seconds.
transition-delay is wrong. It is about the transition. The equivalent of that is: animation-delay. use animation-duration: 14s for the time of running animation. or:
.element {
-webkit-animation: fadeinout 14s linear forwards;
animation: fadeinout 14s linear forwards;
opacity: 0;
width: 100px;
height: 100px;
background-color: red;
}
#-webkit-keyframes fadeinout {
14% { opacity: 1; }
86% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes fadeinout {
14% { opacity: 1; }
86% { opacity: 1; }
100% { opacity: 0; }
}
<div class="element"></div>
This may be a little verbose, but if it is acceptable for your fade duration to be proportional to the duration it is shown you could use a keyframe structure like this:
#keyframes fadeinout {
0% { opacity: 0; },
10% { opacity: 1; },
90% { opacity: 1; },
100% { opacity: 0; }
}
To get a 2 second fadein, a 'stay there' for 10 seconds and then a 2 second fadeout you have an overall animation time of 14 seconds.
For the first (2 / 14) * 100% [=14.29%] you want the opacity to go from 0 to 1
For the next (10 / 14) * 100% [=71.43%] you want the opacity to stay at 1
For the last (2 / 14) * 100% [=14.29%] you want the opacity to go from 1 to 0.
So the animation keyframes look like this:
#keyframes fadeinout {
0%, 100% { opacity: 0; }
14.29%, 85.72% { opacity: 1; }
}
You don't want a delay on your animation (animation-delay just delays the start of an animation).
Current CSS does not allow us to use a calc function in the % settings in keyframes so we've had to do the calculation in advance and build it in (it didn't seem worth going to more than a couple of decimal places).
.element {
animation: fadeinout 14s linear forwards;
opacity: 0;
width: 20vmin;
height: 20vmin;
background-color: magenta;
}
#keyframes fadeinout {
0%,
100% {
opacity: 0;
}
14.29%,
85.72% {
opacity: 1;
}
}
<div class="element"></div>
Can anybody explain why this code doesn't hide elemens between 95-100%? I want to show hidden by opacity object and hide it after animation. I have no idea why it doesn't work.
button {
opacity: 0;
animation: button 6s linear infinite 0s;
}
#keyframes button {
0% {
opacity: 0;
transform: translateY(64px);
}
5% {
opacity: 1;
transform: translateY(0px);
}
95% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<button>example</button>
Display None to Display Block animation is working
but I need the animation to work this way also
- Animation Display Block to Display None
the animations is not working when action go from block to Display None
have an idea what can be the problem?
#dboldDiv,#dbnewDiv {
animation: anim .4s ease-in-out;
}
#keyframes anim {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
display is not animatable property
There are two category of properties animatable and not animatable
you can check animated properties list from here :
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
display:none won't work smooth.
For fluent disappearing try using visibility:hidden, or if just keep 0 opacity and add pointer-events:none, so the object doesn't catch any mouse events.
document.getElementById('hide').addEventListener('click', function(){
document.getElementById('link').className = 'hide';
});
document.getElementById('show').addEventListener('click', function(){
document.getElementById('link').className = 'show';
});
document.getElementById('link').addEventListener('click', function(){
alert('clicked');
});
#link {
display:block;
}
#link.show {
animation: anim1 .4s;
animation-fill-mode: forwards;
}
#link.hide {
animation: anim2 .4s;
animation-fill-mode: forwards;
animation-direction: reverse;
}
#keyframes anim1 {
0% {
opacity: 0.3;
pointer-events:none;
}
100% {
opacity: 1;
pointer-events:all;
}
}
#keyframes anim2 {
0% {
opacity: 0.3;
pointer-events:none;
}
100% {
opacity: 1;
pointer-events:all;
}
}
<button id="hide">Hide</button>
<button id="show">Show</button>
hidding & showing
I have the following code:
#keyframes sonar-wave {
0% {
transform: scale(1.00);
opacity: 0;
}
50% {
transform: scale(1.15);
opacity: 0.5;
}
100% {
transform: scale(1.3);
opacity: 0;
}
}
When this triggers, I see a "pause" before the scale continues. I would like a smooth scaling animation. Fiddle here:
https://jsfiddle.net/Lztxfho9/
What am I doing wrong?
That's because you didn't specify a timing function, So the browser will default to ease
change it to
animation: sonar-wave 2s linear forwards;
So I am trying to get an fade in effect where I want the fade in opacity to start off from 0 and go to 1 but then when it gets played the second time I want it to start from 0.5 and get played to 1. If you need more explanation then please let me know. I have inserted the code below. Thanks
#-webkit-keyframes fadeInCustom {
0% {
opacity: 0;
}
1%{
opacity: 0.1;
}
10%{
opacity: 0.2;
}
30% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#keyframes fadeInCustom {
0% {
opacity: 0;
}
1%{
opacity: 0.1;
}
10%{
opacity: 0.2;
}
30% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}