Lampeggiante colore di sfondo animazione

Sto cercando di creare una sorta di elemento lampeggiante animazione. Dovrebbe durare un secondo tempo, in secondo bordo rosso e verde BG, e un altro mezzo secondo di frontiera verde e rosso BG. Il cambiamento dei colori dovrebbe essere quasi immediato.

Ho provato così:

0, 49%, 99%, 100% {
    background-color: rgb(117,209,63);
    border: 3px solid #e50000;
}
49%, 50%, 99% {
    background-color: #e50000;
    border: 3px solid rgb(117,209,63);
}

Si è lavorato, ma il colore di transizione è stato molto lento. Ho provato anche questo:

0%, 49% {
    background-color: rgb(117,209,63);
    border: 3px solid #e50000;
}
49%, 50% {
    background-color: #e50000;
    border: 3px solid rgb(117,209,63);
}
50%, 99% {
    background-color: #e50000;
    border: 3px solid rgb(117,209,63);
}
99%, 100% {
    background-color: rgb(117,209,63);
    border: 3px solid #e50000;
}

e questo:

0%, 50% {
    background-color: rgb(117,209,63);
    border: 3px solid #e50000;
}
50%, 99% {
    background-color: #e50000;
    border: 3px solid rgb(117,209,63);
}

Ma niente ha funzionato come previsto… Qualsiasi aiuto, per favore?

Quando la vedo bene, hai detto la tua animazione che cosa fare, ma non è quanto tempo deve durare. Date un’occhiata a questa pagina. css-tricks.com/snippets/css/keyframe-animation-syntax
In realtà mi ha detto – l’animazione dovrebbe durare 1 secondo. animation: myAnim 1s infinite
Date un’occhiata a questo, per me questo sembra piuttosto veloce: jsfiddle.net/wydmsfj0 … sarebbe bello vedere più di codice, credo
Hai tutto il diritto di lasciare che i fotogrammi si sovrappongono. Per esempio, l’ultimo che hai sono due regole per il 50% e l’ultimo vince. Essenzialmente, questo rende il cambiamento di colore da 0 a 50% (lento). Invece, tutto quello che doveva fare era rendere i fotogrammi chiave come 0%, 50% e 50.1%, 99% (o dare un 1% di spalato, come Marcel snippet). L’altra cosa da notare, è il frame deve essere sempre %. Anche 0 deve essere rappresentata come 0% o from e non 0.
Sì, è esattamente quello che mi serviva! Potresti per favore postare come una risposta così potevo accettare? Vi ringrazio molto!

InformationsquelleAutor Igal | 2015-12-23

1 risposta

  1. -3

    Raffinatezza del codice già presentata dalla precedente amico

    .blink {
        animation-duration: 0.5s;
        animation-iteration-count: 2;
        animation-direction: alternate;
        animation-timing-function: linear;
    }
    .blink-default {animation-name: anim-default;}
    .blink-primary {animation-name: anim-primary;}
    .blink-success {animation-name: anim-success;}
    .blink-info {animation-name: anim-info;}
    .blink-warning {animation-name: anim-warning;}
    .blink-danger {animation-name: anim-danger;}
    
    @keyframes anim-default {
        to {color: #333;background-color: #fff;}
    }
    @keyframes anim-primary {
        to {color: #fff;background-color: #337ab7;}
    }
    @keyframes anim-success {
        to {color: #fff;background-color: #5cb85c;}
    }
    @keyframes anim-info {
        to {color: #fff;background-color: #5bc0de;}
    }
    @keyframes anim-warning {
        to {color: #fff;background-color: #f0ad4e;}
    }
    @keyframes anim-danger {
        to {color: #fff;background-color: #d9534f;}
    }
    
    <p class="blink blink-primary">example linear</p>

    InformationsquelleAutor Victor Rocha

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *