This is the fourth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Just learned CSS animation and want to do something cool, let’s start with a CSS text flicker effect.

Text flicker is a common way to do PPT, can attract attention, so as to achieve the effect of aggravating the concept.

Animation attributes

CSS animation is the key to CSS animation. The documentation describes the animation as consisting of six properties:

animation: // Meaning and default animation-name, // Animation name: none animation-duration, // Animation duration event:0s, the value must be changed to not0Value, otherwise the animation will not play. Animation - timing - function, / / state change speed, ease, namely gradually slow animation - delay, / / animation initial broadcast delay time:0sAnimation-iteration -count, // The number of times the animation is run before it ends:1If the value is infinite, the animation direction is played continuously. If the value is infinite, the animation direction is played continuously. If the value is infinite, the animation direction is played continuously. Animation-fill-mode, // How to apply the style to its target before and after execution: None animation-play-state // Whether to run or pause: runningCopy the code

Scintillation implementation

The implementation is also very simple, the basic idea can be achieved by constantly changing the font size:

<! DOCTYPEhtml>

<body>
    <div class="scale">Go China! Olympic athletes refueling!</div>
</body>
<style>
    .scale {
        width: 100%;
        height: 100%;
        z-index: 0;
        font-size: 50px;
        color: black;
        animation: scale 1s infinite;
        -webkit-animation: scale 1s infinite;
    }

    
/* Define a keyFrame animation named blink */
@keyframes scale{
  0%{font-size: 50px; }100%{font-size: 100px;} 
}

@-webkit-keyframes scale{
  0%{font-size: 50px; }100%{font-size: 100px;} 
}
</style>

</html>
Copy the code

The specific effect is shown in the figure below:

(ScreenToGif) ScreenToGif (ScreenToGif)

Github: github.com/NickeManari…

What I find strange is that if I write all the properties strictly according to the definition of animation, it is invalid, but only three properties are provided but it is valid. I wonder if any big guy knows why?