I have two patterns. I would like show them in this order
1) fade in pattern 1
2) fade in pattern 2
3) fade out pattern 1
4) fade out pattern 2
and then repeat indefinitely.
I have this, which shows the correct order, but does not pause the pattern, while the other fades in.
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
.pattern-one {
animation: fadeIn 2s infinite alternate;
}
.pattern-two {
animation: fadeOut 2s infinite alternate;
}
Is it possible to introduce a pause?
are you trying to achieve something like this?
#keyframes fadeIn {
0% { opacity: 1; }
25% { opacity: 0; }
50% { opacity: 1; }
75% { opacity: 1; }
100% { opacity: 1; }
}
#keyframes fadeOut {
0% { opacity: 1; }
25% { opacity: 1; }
50% { opacity: 0; }
75% { opacity: 1; }
100% { opacity: 1; }
}
.pattern-one {
animation: fadeIn 4s infinite;
}
.pattern-two {
animation: fadeOut 4s infinite;
}
div{
width:50px;
height:50px;
background-color: blue;
margin:10px;
}
<div class="pattern-one"></div>
<div class="pattern-two"></div>
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 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 can make an element with an opacity of zero fade in by changing its class to .elementToFadeInAndOut with the following css:
.elementToFadeInAndOut {
opacity: 1;
transition: opacity 2s linear;
}
Is there a way I can make the element fade out after it fades in by editing css for this same class?
Use css #keyframes
.elementToFadeInAndOut {
opacity: 1;
animation: fade 2s linear;
}
#keyframes fade {
0%,100% { opacity: 0 }
50% { opacity: 1 }
}
here is a DEMO
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}
#-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
#keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
<div class=elementToFadeInAndOut></div>
Reading: Using CSS animations
You can clean the code by doing this:
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
opacity: 0;
}
#-webkit-keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes fadeinout {
50% { opacity: 1; }
}
<div class=elementToFadeInAndOut></div>
If you need a single fadeIn/Out without an explicit user action (like a mouseover/mouseout) you may use a CSS3 animation: http://codepen.io/anon/pen/bdEpwW
.elementToFadeInAndOut {
animation: fadeInOut 4s linear 1 forwards;
}
#keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
By setting animation-fill-mode: forwards the animation will retain its last keyframe
By setting animation-iteration-count: 1 the animation will run just once (change this value if you need to repeat the effect more than once)
I found this link to be useful: css-tricks fade-in fade-out css.
Here's a summary of the csstricks post:
CSS classes:
.m-fadeOut {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms;
}
In React:
toggle(){
if(true condition){
this.setState({toggleClass: "m-fadeIn"});
}else{
this.setState({toggleClass: "m-fadeOut"});
}
}
render(){
return (<div className={this.state.toggleClass}>Element to be toggled</div>)
}
Try creating a keyframes animation for the opacity attribute of your element:
<style>
p {
animation-name: example;
animation-duration: 2s;
}
#keyframes example {
from {opacity: 2;}
to {opacity: 0;}
}
</style>
<div>
<p>[Element to fade]</p>
</div>
(You can also set the exact percentages of animations to make it fade in/out. For example, set 0% to 2 opacity, 50% to 0 opacity, and 100% to 2 opacity. A good source for this method is W3Schools # https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation2 .)
Try this:
#keyframes animationName {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#-o-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#-moz-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#-webkit-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
.elementToFadeInAndOut {
-webkit-animation: animationName 5s infinite;
-moz-animation: animationName 5s infinite;
-o-animation: animationName 5s infinite;
animation: animationName 5s infinite;
}
Ok, I don't get this. I've done CSS3 animations before, but for some reason simply animating the opacity isn't working for me today. Am I missing something silly?
CSS:
#-webkit-keyframes fadein {
from: { opacity: 0; }
to: { opacity: 1; }
}
#-moz-keyframes fadein {
from: { opacity: 0; }
to: { opacity: 1; }
}
#keyframes fadein {
from: { opacity: 0; }
to: { opacity: 1; }
}
#foo {
background-color: green;
color: white;
-webkit-animation: fadein 2s ease-in alternate infinite;
-moz-animation: fadein 2s ease-in alternate infinite;
animation: fadein 2s ease-in alternate infinite;
}
HTML:
<div id="foo">This is Foo!</div>
I've also posted it as a fiddle:
http://jsfiddle.net/NRutman/Lcyvy/
Any help would be appreciated.
Thanks,
-Nate
You don't need colons after from and to:
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
http://jsfiddle.net/Lcyvy/6/
Change
#keyframes fadein {
from: { opacity: 0; }
to: { opacity: 1; }
}
to
#keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
DEMO