La animación CSS conserva las propiedades originales

Question

Tengo esta animación CSS que comienza con un color de fondo y tiene una transición al color de fondo original:

@high-light-white: #ffffff;
@high-light-yellow: #ede5d0;
@high-light-default: #dce1ea;
@high-light-duration: 10s;

.highlight-comment {
    -webkit-animation-name: highlight; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: @high-light-duration; /* Safari 4.0 - 8.0 */
    animation-name: highlight;
    animation-duration: @high-light-duration;
}
@keyframes highlight {
    from {
        background-color: @high-light-yellow;
    }
    to {
        background-color: @high-light-default;
    }
}

Mi problema es que tengo otro elemento que quiero usar este mismo CSS, pero tiene un color de fondo diferente. ¿Hay alguna manera de animarlo para que la transición se configure con el color de fondo original sin especificarlo?

css animation less

2

Felipe Wagner 23 ene. 2018 a las 14:56

Answer 1

Variables CSS / Propiedades personalizadas puede hacer eso.

La misma animación, con las mismas variables, pero la variable se compila en tiempo de ejecución y se puede cambiar en un solo elemento reiniciando.

:root {
  --default: blue;
  --highlight: lightyellow;
}

div {
  width: 50%;
  margin: 1em auto;
  border: 1px solid grey;
  height: 50px;
}

.one,
.two {
  background: var(--default);
  animation: highlight 2.5s linear infinite;
}

.two {
  --default: red;
}

@keyframes highlight {
  from {
    background-color: var(--highlight);
  }
  to {
    background-color: var(--default);
  }
}

<div class="one"></div>

<div class="two"></div>

1

Paulie_D 23 ene. 2018 a las 12:23

Answer 2

Tratar

.div-with-original-background-color {
    background-color: blue;
}
.div-with-another-original-background-color {
    background-color: green;
}

@keyframes highlight {
    from {
        background-color: @high-light-yellow;
    }
    to {
        background-color: transparent;
    }
}

<div class="div-with-original-background-color">
    <div class="highlight-comment">
       Some Sweet comment...
    </div>
</div>

<div class="div-with-another-original-background-color">
    <div class="highlight-comment">
       foo
    </div>
</div>

-1

Tobias 23 ene. 2018 a las 12:29

Answer 3

Una idea es especificar solo un color en la animación y pasar de 0% a x% y el restante será el predeterminado:

.box {
  height: 150px;
  background: red;
  animation: anim 2s linear infinite;
}

.box-2 {
  height: 50px;
  background: black;
  animation: anim 2s linear infinite;
}

@keyframes anim {
  0%,
  20% {
    background: blue;
  }
}

<div class="box">

</div>
<div class="box-2">

</div>

2

Temani Afif 23 ene. 2018 a las 12:37

La animación CSS conserva las propiedades originales

3 respuestas

Preguntas relacionadas

Nuevas preguntas

css