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

#javascript #jquery #css

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




Как это можно сделать?
    

Ответы

Ответ 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;
  }
}
При помощи transition. Можно использовать при смене состояния и с
добавлением класса (наведите курсор):


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





Свойство transition

Использование CSS анимации