Fade the same image in and out in one line of CSS automatically

Question

I have an image that I want to fade in and out automatically. I've read about transitions and animations and would like to use one or two styles (not style declarations). It's OK to start the animation via JavaScript.

In this example on MDN you can see that the items are animated on page load by switching classes. I would like it to be simpler than that.

Here is what I have so far and it seems like it should work but it's not.

function updateTransition(id) {
  var myElement = document.getElementById(id);
  var opacity = myElement.style.opacity;
  if (opacity==null || opacity=="") opacity = 1;
  myElement.style.opacity = opacity==0 && opacity!="" ? 1 : 0;
}

var id = window.setInterval(updateTransition, 5000, "myElement");
updateTransition("myElement");

#myElement {
    background-color:#f3f3f3;
    width:100px;
    height:100px;
    top:40px;
    left:40px;
    font-family: sans-serif;
    position: relative;
    animation: opacity 3s linear 1s infinite alternate;
}

<div id="myElement"></div>

Also, here is an example of an animation on infinite loop using a slide animation (3 example in the list). I'd like the same but with opacity.

https://developer.mozilla.org/en-US/docs/Web/CSS/animation

The linked question is not the same as this. As I stated, "single line styles (not style declarations)".

Possible duplicate of [Simple CSS Animation Loop – Fading In & Out "Loading" Text](https://stackoverflow.com/questions/23985018/simple-css-animation-loop-fading-in-out-loading-text) — Huangism, Jan 14 '19 at 17:09
@Huangism That's very close to what I want but I want to avoid defining a second style declaration. By that I mean no `@keyframes`. FYI I might be able to fall back on the linked answer but as I mention originally my requirement requests avoiding it. — 1.21 gigawatts, Jan 14 '19 at 18:20
How do you plan to animate without the keyframe `slidein` in the Moz example? Just because they didn't list the keyframe in their example it doesn't mean it is not there, https://interactive-examples.mdn.mozilla.net/live-examples/css-examples/animation/animation.css search for `slidein` and see. It's also the reason why your example in the question does not work. It's a duplicated question, people add answers to get rep. — Huangism, Jan 14 '19 at 18:23
OK They didn't list the keyframes in their example. So are you saying there's no way to do it without key frames? I added some JS on a set interval that sort of works but it has two problems. The set interval has a duration and the transition has a duration. If it doesn't support it without keyframes please add that as answer. — 1.21 gigawatts, Jan 14 '19 at 18:41

nloewen · Accepted Answer · 2019-01-14T17:33:43.727

2

What you need is to define your animation using keyframes. If you are trying to apply multiple animations, you can provide a list of parameters to the animation CSS properites. Here's an example that applies a slide in and fade animation.

.fade {
  width:100px;
  height:100px;
  background-color:red;
  position:relative;
  animation-name:fadeinout, slidein;
  animation-duration:2s, 1s;
  animation-iteration-count:infinite, 1;
  animation-direction:alternate, normal;
}

@keyframes fadeinout {
  0% {
    opacity:0
  }

  100% {
    opacity:100
  }
}

@keyframes slidein {
  from {
    left:-100px;
  }
  
  to {
    left:0px;
  }
}

<div class='fade'>

</div>

edited Jan 14 '19 at 17:33

answered Jan 14 '19 at 17:13

nloewen

1,279
11
18

This is great. Is there a way to start and stop it? Would that be adding or removing the class? – 1.21 gigawatts Jan 14 '19 at 20:06
Yeah, adding and removing the class would do it. – nloewen Jan 16 '19 at 17:02
OK. BTW I found this today https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state. By setting the animation-play-state I can pause and resume an animation but not play from the start or reverse it. – 1.21 gigawatts Jan 16 '19 at 17:10

Aziz.G · Answer 2 · 2019-01-14T20:27:11.117

1

You can use animation-iteration-count :

#myElement {
  background-color: #f3f3f3;
  width: 100px;
  height: 100px;
  top: 40px;
  left: 40px;
  font-family: sans-serif;
  position: relative;
  animation: slidein 2s linear alternate;
  animation-iteration-count: infinite;
}

@keyframes slidein {
  0% {
    opacity: 0;
    left: -100px;
  }
  50% {
    opacity: 1;
    left: 40px;
  }
  100% {
    opacity: 0;
    left: -100px;
  }
}

<div id="myElement"></div>

edited Jan 14 '19 at 20:27

answered Jan 14 '19 at 17:13

Aziz.G

3,599
2
17
35

This looks good but it slides into place and then slides out and then snaps to the end position. Can you make it loop? – 1.21 gigawatts Jan 14 '19 at 18:59
1

done just change animation-iteration-count to infinite; – Aziz.G Jan 14 '19 at 20:27

Fade the same image in and out in one line of CSS automatically

2 Answers2