I'm trying to animate a pseudo class before the parent class.
For example,
.parent {
opacity: 0;
animation: fadeIn 1s linear 2s;
animation-fill-mode: forwards;
&:before {
content: 'something';
position: absolute;
left: 50%;
opacity: 0;
visibility: hidden;
animation: fadeInOut 2s linear;
animation-fill-mode: forwards;
}
#keyframes fadeInOut {
0% {
opacity: 0;
visibility: visible;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
So in my mind, this should fade in and out something then parent gets loaded.. however, that's not the case... I tried taking out visibility but still fails... what am I doing wrong?
Related
I have the following SVG animation that works perfectly fine in Chrome, Safari, Firefox but the line drawing doesn't display in IE.
I tried just the line drawing without the fade or moving away from the css shorthands but no change.
Any help or suggestion would be appreciated.
http://jsfiddle.net/zpL4okys/
.path {
stroke:#fff;
fill:transparent;
stroke-width:1;
opacity: 0;
-webkit-animation: dash 1.5s linear forwards, fadeout 1.9s linear;
animation: dash 1.5s linear forwards, fadeout 1.9s linear;
}
.drawing {
position: relative;
}
.illustration, .line-drawing {
position: absolute;
top:20%;
left:0;
right: 0;
margin: auto;
}
.illustration {
opacity: 1;
animation: fadein 2s ease-in;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#keyframes fadeout {
0% {
opacity:1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadein {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
I'm using css to make an image appear after a certain delay time. I want to make it disappear after another delay time. I have the appear part working, but once I add the disappear part, neither of them work. Can someone tell me what I'm doing wrong, please?
html:
<img class="anim-object anim-smallcar bluebag" src="img/bluebag.gif" />
css:
.bluebag {
position: absolute;
bottom: 160px;
left: 42.25%;
opacity: 0;
animation-name: opacityOn;
animation-duration: 100ms;
animation-delay: 13.7s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-name: opacityOff;
animation-duration: 100ms;
animation-delay: 17.7s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
#keyframes opacityOn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes opacityOff {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
You can add more CSS animation iterations while changing the value of your opacity on the #keyframes the 0% to 25% to 50% to 75% and finally 100%
.bluebag {
opacity: 0;
background: blue;
height: 100px;
width: 100px;
animation: opacityOn 5s normal forwards;
animation-delay: 2s;
}
#keyframes opacityOn {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
50% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="anim-object anim-smallcar bluebag" src="img/bluebag.gif">aa</div>
The only change I would make to Alexandre's code is to make the opacity keyframe all one thing like this:
#keyframes opacityOnAndOff {
0% {
opacity: 0;
}
50%{
opacity: 1;
}
100% {
opacity: 0;
}
}
Depending on how long you want to spend on going to full opacity and then clearing out, you can change the percentages, so if you want a longer closing, you could change the code above to something like
#keyframes opacityOn {
0% {
opacity: 0;
}
30%{
opacity: 1;
}
100% {
opacity: 0;
}
}
Something like that ?
.bluebag {
opacity: 0;
background: blue;
height: 100px;
width: 100px;
animation: opacityOn 1s normal forwards step-end;
animation-delay: 2s;
}
#keyframes opacityOn {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="anim-object anim-smallcar bluebag" src="img/bluebag.gif">aa</div>
CSS is not an iterative language. When you write that:
animation-name: opacityOn;
animation-duration: 100ms;
animation-delay: 13.7s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-name: opacityOff;
animation-duration: 100ms;
animation-delay: 17.7s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
your second section override the first one.
I'm trying to animate a certain div opacity from 0 to 0.6, but it seems that at the end of the animation it jumps to 1.
What am I missing?
#test {
width: 200px;
height: 200px;
background-color: #900;
animation: fadein 2s;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-o-animation: fadein 2s;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
<div id="test"></div>
You need to specify animation-fill-mode: forwards if you want the element's CSS to remain at the last step of the animation.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
Forwards: The target will retain the computed values set by the last keyframe encountered during execution.
#test {
width: 200px;
height: 200px;
background-color: #900;
animation: fadein 2s forwards;
-moz-animation: fadein 2s forwards;
-webkit-animation: fadein 2s forwards;
-o-animation: fadein 2s forwards;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
<div id="test"></div>
Have you tried setting the opacity on the element you are animating to the final value?
I believe the rules in a CSS animation stop applying when the animation finishes. I would guess it is animating from 0 to 0.5 and then reverting to 1, 1 being the default opacity since you don't have an opacity specified on the element itself.
I hope this helps!
I want to fade in-out elements sequentially (one after another) with css only, ie show one, hide it, show next one, hide it and so on, then repeat. At the moment I have this css it works fine, but I will have 20 elements and it seems like a lot of code for something so simple. Any suggestions on how to improve this with less code?
.map-presence__stat--stat1 {
animation: fadeInOut1 6s ease-in-out;
animation-iteration-count: infinite;
}
.map-presence__stat--stat2 {
animation: fadeInOut2 6s ease-in-out;
animation-iteration-count: infinite;
}
.map-presence__stat--stat3 {
animation: fadeInOut3 6s ease-in-out;
animation-iteration-count: infinite;
}
#-webkit-keyframes fadeInOut1 {
0%{
opacity: 1;
}
32%{
opacity: 1.0;
}
33%{
opacity: 0;
}
99%{
opacity: 0;
}
}
#-webkit-keyframes fadeInOut2 {
0%{
opacity: 0;
}
32%{
opacity: 0;
}
33%{
opacity: 1;
}
66%{
opacity: 1;
}
67%{
opacity: 0;
}
99%{
opacity: 0;
}
}
#-webkit-keyframes fadeInOut3 {
0%{
opacity: 0;
}
32%{
opacity: 0;
}
33%{
opacity: 0;
}
66%{
opacity: 0;
}
67%{
opacity: 1;
}
99%{
opacity: 1;
}
}
I am having a look at CSS3 keyframes and want to have a box that eases in then eases out for the specified iteration-count, this is what I have so far it eases in then disappears then eases in again.
I want the box to ease in then ease out. See my fiddle. What do I need to do to achieve this?
<div id="content">
<span class="aniamte"></span>
</div>
#keyframes reset {
0% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes fade-in {
0% { opacity: 0; }
60% { opacity: 0; }
100% { opacity: 1; }
}
.aniamte {
background: red;
display: inline-block;
height: 100px;
width: 100px;
animation-name: reset, fade-in;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: 5;
animation-delay: 0, 1s;
}
I believe you're looking for animation-direction:alternate, but your question is not very clear. This will make your element use the keyframes from 0% to 100% for the specified duration then go from 100% to 0% after the first iteration is complete
#keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animate {
background: red;
display: inline-block;
height: 100px;
width: 100px;
animation-name: fade-in;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-direction:alternate;
animation-iteration-count: 5;
}
Demo