89 views

Knipperende/knipperende tekst maken met CSS 3

Hosted by Code Expert
html

Momenteel heb ik deze code:

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}
.waitingForConnection {
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s;
}

Het knippert, maar het knippert alleen in “één richting”. Ik bedoel, het vervaagt alleen, en dan verschijnt het terug met opacity: 1.0, dan verdwijnt het weer, verschijnt het weer, enzovoort…

Ik zou graag willen dat het uitfadet en vervolgens van deze fade weer “verhoogt” naar opacity: 1.0. Is dat mogelijk?

Antwoord 1, autoriteit 100%

Je stelt eerst opacity: 1;in en dan beëindig je het op 0, dus het begint bij 0%en eindigt op 100%, dus zet in plaats daarvan de dekking op 0op 50%en de rest regelt zichzelf.

Demo

.blink_me {
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink_me">BLINK ME</div>

Antwoord 2, autoriteit 9%

De beste manier om puur “100% aan, 100% uit” te knipperen, zoals de oude <blink>is als volgt:

.blink {
  animation: blinker 1s step-start infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink">BLINK</div>

Antwoord 3, autoriteit 9%

Gebruik de alternatewaarde voor animation-direction(en je hoeft op deze manier geen keframes toe te voegen).

alternate

De animatie moet elke cyclus van richting omkeren. Bij het achteruit afspelen worden de animatiestappen achteruit uitgevoerd. Bovendien zijn timingfuncties ook omgekeerd; zo wordt een easy-in-animatie vervangen door een easy-out-animatie wanneer deze in omgekeerde volgorde wordt afgespeeld. De telling om te bepalen of het een even of een oneven iteratie is, begint bij één.

CSS:

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }

Ik heb het fromkeyframe verwijderd. Als het ontbreekt, wordt het gegenereerd op basis van de waarde die je hebt ingesteld voor de geanimeerde eigenschap (opacityin dit geval) op het element, of als je het niet hebt ingesteld (en je hebt niet in dit geval), van de standaardwaarde (die 1is voor opacity).

En gebruik alsjeblieft niet alleen de WebKit-versie. Voeg er ook een zonder prefix aan toe. Als je gewoon minder code wilt schrijven, gebruik dan de afkorting.

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }
.waitingForConnection2 {
  animation: blinker2 0.6s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker2 { to { opacity: 0; } }
.waitingForConnection3 {
  animation: blinker3 1s ease-in-out infinite alternate;  
}
@keyframes blinker3 { to { opacity: 0; } }
<div class="waitingForConnection">X</div>
<div class="waitingForConnection2">Y</div>
<div class="waitingForConnection3">Z</div>

Antwoord 4, autoriteit 2%

Als u geen geleidelijke overgang tussen tonen en verbergen wilt (bijv. een knipperende tekstcursor), kunt u ook zoiets gebruiken als:

/* Also use prefixes with @keyframes and animation to support current browsers */
@keyframes blinker {  
  from { visibility: visible }
  to { visibility: hidden }
  /* Alternatively you can do this:  
  0% { visibility: visible; }
  50% { visibility: hidden; }
  100% { visibility: visible; }
  if you don't want to use `alternate` */
}
.cursor {
  animation: blinker steps(1) 500ms infinite alternate;
}

Elke 1s.cursorgaat van visiblenaar hidden.

Als CSS-animatie niet wordt ondersteund (bijvoorbeeld in sommige versies van Safari), kunt u terugvallen op dit eenvoudige JS-interval:

(function(){
  var show = 'visible'; // state var toggled by interval
  var time = 500; // milliseconds between each interval
  setInterval(function() {
    // Toggle our visible state on each interval
    show = (show === 'hidden') ? 'visible' : 'hidden';
    // Get the cursor elements
    var cursors = document.getElementsByClassName('cursor');
    // We could do this outside the interval callback,
    // but then it wouldn't be kept in sync with the DOM
    // Loop through the cursor elements and update them to the current state
    for (var i = 0; i < cursors.length; i++) {
      cursors[i].style.visibility = show;
    }
  }, time);
})()

Dit eenvoudige JavaScript is eigenlijk heel snel en kan in veel gevallen zelfs een betere standaard zijn dan de CSS. Het is vermeldenswaard dat het veel DOM-aanroepen zijn die JS-animaties traag maken (bijv. JQuery’s $.animate()).

Het heeft ook het tweede voordeel dat als je later .cursor-elementen toevoegt, ze nog steeds op exact hetzelfde moment animeren als andere .cursors, aangezien de status gedeeld, is dit voor zover ik weet onmogelijk met CSS.

Antwoord 5, autoriteit 2%

Ik weet niet waarom, maar het animeren van alleen de eigenschap visibilitywerkt in geen enkele browser.

Wat u kunt doen, is de eigenschap opacityzo animeren dat de browser niet genoeg frames heeft om de tekst in of uit te faden.

Voorbeeld:

span {
  opacity: 0;
  animation: blinking 1s linear infinite;
}
@keyframes blinking {
  from,
  49.9% {
    opacity: 0;
  }
  50%,
  to {
    opacity: 1;
  }
}
<span>I'm blinking text</span>

Antwoord 6, autoriteit 2%

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

Antwoord 7

Wijzig de duur en dekking naar wens.

.blink_text { 
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 3s;
    animation-timing-function: linear; 
    animation-iteration-count: infinite; color: red; 
} 
@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
}
@-webkit-keyframes blinker { 
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
} 
@keyframes blinker { 
    0% { opacity: 1.0; } 
    50% { opacity: 0.3; } 
    100% { opacity: 1.0; } 
}

Antwoord 8

Laat maar wilde een nieuwe toevoegen met meer keyframes … hier is een voorbeeld op CodePenaangezien er een probleem was met de ingebouwde codefragmenten: 

.block{
  display:inline-block;
  padding:30px 50px;
  background:#000;
}
.flash-me {
  color:#fff;
  font-size:40px;
  -webkit-animation: flash linear 1.7s infinite;
  animation: flash linear 1.7s infinite;
}
@-webkit-keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}
@keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}
<span class="block">
  <span class="flash-me">Flash Me Hard</span>
</span>

Antwoord 9

Mijn oplossing:

.blink {
 animation: blinkMe 2s linear infinite;
}
@keyframes blinkMe {
 0% {
  opacity: 0;
 }
 50% {
  opacity: 1;
 }
 100% {
  opacity: 0;
 }
}
<p class="blink">Blink</p>

Antwoord 10

<style>
    .class1{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:#2a9fd4;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:45px;
    }
     .class2{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:green;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:65px;
    }
</style>
<script src="jquery-3.js"></script>
<script>
    $(document).ready(function () {
        $('#div1').addClass('class1');
        var flag = true;
        function blink() {
            if(flag)
            {
                $("#div1").addClass('class2');
                flag = false;
            }
            else
            { 
                if ($('#div1').hasClass('class2'))
                    $('#div1').removeClass('class2').addClass('class1');
                flag = true;
            }
        }
        window.setInterval(blink, 1000);
    });
</script>

Antwoord 11

Het werkt voor mij door class=blinkte gebruiken voor de respectievelijke element(en)

Eenvoudige JS-code

// Blink
      setInterval(function()
        {
        setTimeout(function()
        {
        //$(".blink").css("color","rgba(0,0,0,0.1)"); // If you want simply black/white blink of text
        $(".blink").css("visibility","hidden"); // This is for Visibility of the element  
        },900);
        //$(".blink").css("color","rgba(0,0,0,1)");  // If you want simply black/white blink of text
        $(".blink").css("visibility","visible");  // This is for Visibility of the element
        },1000);

Antwoord 12 

.neon {
  font-size: 20px;
  color: #fff;
  text-shadow: 0 0 8px yellow;
  animation: blinker 6s;
  animation-iteration-count: 1;
}
@keyframes blinker {
  0% {
    opacity: 0.2;
  }
  19% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  21% {
    opacity: 1;
  }
  22% {
    opacity: 0.2;
  }
  23% {
    opacity: 0.2;
  }
  36% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
  41% {
    opacity: 0;
  }
  42% {
    opacity: 1;
  }
  43% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

Ik gebruikte font-family: "Quicksand", sans-serif;

Dit is de import van het lettertype (gaat op de bovenkant van de stijl.css) 

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");

Antwoord 13

Probeer dit als u gladde animaties wilt. 

.blink {
    animation: blinker 1s infinite;
}
@keyframes blinker {
    from { opacity: 1.0; }
    50% { opacity: 0.5; }
    to { opacity: 1.0; }
}

. 

<span class="blink">I am blinking</span>
Previous articleNumpy waar functie meerdere voorwaarden
Next articleis er een css-hack voor safari alleen NIET chrome?

Other episodes

Invoertype=wachtwoord, laat de browser het wachtwoord niet onthouden

html Code Expert - 0
Ik herinner me dat ik een manier heb gezien om een ​​<input type="password" />te hebben, zodat de browser nietde gebruiker vraagt ​​om het wachtwoord...
Read more

VueJS/browser caching productie builds

html Code Expert - 0
Ik heb een VueJS-app. Telkens wanneer ik npm run builduitvoer, wordt er een nieuwe set dist/*-bestanden gemaakt, echter wanneer ik ze op de server...
Read more

Verhogingspijlen aanpassen bij invoer van typenummer met CSS

html Code Expert - 0
Ik heb een typenummer ingevoerd dat wordt weergegeven met de volgende code: <input class="quantity" id="id_form-0-quantity" min="0" name="form-0-quantity" value="1" type="number"> Het ziet er zo uit: Ik zou...
Read more

Angular 4 img src is niet gevonden

html Code Expert - 0
Ik heb een probleem met het vinden van een afbeelding met hoek 4. Hij blijft me vertellen dat de afbeelding niet is gevonden. Mapstructuur: app_folder/ app_component/ ...
Read more

HTML-tags binnen <label>

html Code Expert - 0
Ik heb een tabel op een pagina die bestaat uit selectievakjes in de cellen aan de linkerkant en beschrijvingen in de cellen aan de...
Read more

Items die alle kolommen/rijen beslaan met behulp van CSS-rasterlay-out

html Code Expert - 0
Nu de CSS-rasterlay-outmodule binnenkort in Firefox en Chrome wordt geleverd, dacht ik dat ik zou proberen te begrijpen hoe ik het moet gebruiken. Ik heb...
Read more

Angular 2 Hash (#) van de URL verwijderen

html Code Expert - 0
Ik probeer het #-teken van de url in Angular 2 te verwijderen, maar ik kon geen goede uitleg vinden over hoe ik het kan...
Read more

© Copyright - Code Expert 2021