3

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

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

1 ответ 1

8

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

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

2
  • 1
    Подскажите а как сделать так чтобы анимация выполнилась один только раз(напримере второй анимации) 14 авг 2016 в 17:26
  • 1
    @vasily_dumov убрать параметр infinite. А еще прочитайте статью, ссылку на которую я привел в ответе. Там подробно рассказывается о различных вариантах применения анимации и о необходимых вендерных префиксах у свойств для лучшей поддержки браузерами.
    – qodunpob
    14 авг 2016 в 17:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.