I have a picture. I need to make an animation on which a check mark appears frame by frame enter image description here enter image description here enter image description here

How can I do that?

    1 answer 1

    body { font-family: sans-serif; font-size: .9em; } .example-1 { position: relative; width: 50px; height: 50px; box-sizing: border-box; border: 5px solid #ddaa55; border-radius: 50%; } .example-1:after { content: ''; position: absolute; left: 0; top: -10px; width: 0; height: 50px; background: url(http://iconspot.ru/files/175351.png) 0 0 no-repeat; background-size: cover; transition: width .5s; } .example-1:hover:after { width: 50px; } .example-2 { position: relative; width: 50px; height: 50px; box-sizing: border-box; border: 5px solid #ddaa55; border-radius: 50%; } .example-2:after { content: ''; position: absolute; left: 0; top: -10px; width: 50px; height: 50px; background: url(http://iconspot.ru/files/175351.png) 0 0 no-repeat; background-size: cover; animation: .5s linear 0s infinite alternate check; } @keyframes check { from { width: 0; } to: { width: 50px; } } 
     <p>ΠŸΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ <code>transition</code>. МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ смСнС состояния ΠΈ с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ класса (Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ курсор):</p> <div class="example-1"></div> <p>ΠŸΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ <code>animation</code>. МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈ смСнС состояния ΠΈΠ»ΠΈ с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ класса, Ρ‚Π°ΠΊ ΠΈ Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ события:</p> <div class="example-2"></div>

    transition property

    Using CSS animations

    • one
      Tell me how to make the animation run only once (for example, the second animation) - vasily_dumov
    • one
      @vasily_dumov remove the infinite parameter. And read the article, the link to which I gave in the answer. It tells in detail about the various options for the application of animation and the necessary gender-based prefixes of properties for better browser support. - Konstantin Basharkevich