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?
3 respuestas
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>
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>
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>
Preguntas relacionadas
Nuevas preguntas
css
CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo de representación utilizado para describir el aspecto y el formato de documentos HTML (HyperText Markup Language), XML (Extensible Markup Language) y elementos SVG que incluyen (pero no se limitan a) colores, diseño, fuentes, y animaciones. También describe cómo se deben representar los elementos en la pantalla, en papel, en el habla o en otros medios.