у меня есть картинка.Мне нужно сделать анимацию по которой галочка покадрово появится
Как это можно сделать?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществу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>
infinite
. А еще прочитайте статью, ссылку на которую я привел в ответе. Там подробно рассказывается о различных вариантах применения анимации и о необходимых вендерных префиксах у свойств для лучшей поддержки браузерами.