Как создать анимацию покадрового появления галочки

у меня есть картинка.Мне нужно сделать анимацию по которой галочка покадрово появится
Как это можно сделать?

Ответ

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; } }

При помощи transition. Можно использовать при смене состояния и с добавлением класса (наведите курсор):

При помощи animation. Можно использовать как при смене состояния или с добавлением класса, так и без какого-либо события:

Свойство transition
Использование CSS анимации