CSS, how to change the background after a certain time and keep it like that

Question

When i run this the color will change after 5 seconds but after the 5 seconds it goes back to White, however i want it to stay #1b1b1b

.bg {
  -webkit-animation: change-color 5s; /* Safari 4+ */
  -moz-animation:    change-color 5s; /* Fx 5+ */
  -o-animation:      change-color 5s; /* Opera 12+ */
  animation:         change-color 5s; /* IE 10+ */
}

And

@-webkit-keyframes change-color {
 from {
        background: White;
 }
 to {
        background: #1b1b1b;
 }
}
(I also use -moz-animation etc)

score 4 · Answer 1 · answered Sep 16 '20 at 11:13

4

Just add forwards to you animation declaration:

.bg {
  height: 400px;
  width: 400px;
  -webkit-animation: change-color 5s forwards;
  /* Safari 4+ */
  -moz-animation: change-color 5s forwards;
  /* Fx 5+ */
  -o-animation: change-color 5s forwards;
  /* Opera 12+ */
  animation: change-color 5s forwards;
  /* IE 10+ */
}

@-webkit-keyframes change-color {
  from {
    background: white;
  }
  to {
    background: #1b1b1b;
  }
}

<div class="bg"></div>

Please notice that background: White is invalid but background: white is.

answered Sep 16 '20 at 11:13

johannchopin

13,720
10
55
101

1

will just add that the property long-hand is animation-fill-mode: forwards; – Simon Sep 16 '20 at 11:16
@Timvanderploeg No problem please don't `validate` the answer ;) – johannchopin Sep 16 '20 at 11:29

score 0 · Answer 2 · answered Sep 16 '20 at 11:15

0

Use a simple transition.

body {
    background: red;
    transition: background 5s linear;
}

.recolor {
    background: black;
}

Adding the class recolor to the body will change the color from red to black.

answered Sep 16 '20 at 11:15

michaelT

1,533
12
41

CSS, how to change the background after a certain time and keep it like that

2 Answers2