Работая над одним большим проектом, мы с напарником задумались над тем, чтобы автоматизировать процесс сбора спрайтов на проекте.
До этого спрайты собирались ручками или с помощью онлайн сервисов, что отнимало достаточно времени.
Проект уже собирался Gulp'ом и было принято решение найти адаптированный под него сборщик спрайтов.
Читать полностью »
Рубрика «спрайт»
Генерация CSS-спрайтов с Gulp
2014-07-07 в 5:13, admin, рубрики: css, gulp, javascript, stylus, автоматизация рутины, Веб-разработка, спрайтАнимация листа со спрайтами посредством steps()
2012-12-03 в 11:30, admin, рубрики: css, keyframes, steps, анимация, спрайт, спрайты ![[иллюстрация принципа]](https://www.pvsm.ru/images/animaciya-lista so spraitami-posredstvom steps().jpg "Анимация листа со спрайтами посредством steps()")
Если вам не хочется использовать гифы на сайте, а предпочитаете PNG за их лучшую цветность, но всё же нужно анимировать их, тогда вот способ:
у анимаций CSS с ключевыми кадрами есть свойство под названием animation-timing-function. Одна из его возможностей — использовать функцию steps(), как в нижеследующем примере:
div {
animation: play 1s steps(10) infinite;
}
@keyframes play {
0% { background-position: 0px 0; }
100% { background-position: -500px 0; }
}
Различие между нею и остальными анимационными функциями состоит в том, что вместо плавного движения от 0px к −500px происходят резкие прыжки с паузами между ними. Это идеально подходит для анимаций, использующих лист с покадровым изображением спрайта. В вышеприведённом примере шаг равен 50px, а пауза — 100 миллисекунд (всего 10 шагов).
Вот небольшое демо.