WebKit теперь поддерживает явные анимации в CSS. В качестве аналога переходов, анимации предоставляют возможность объявления повторяя анимационные эффекты, при помощи ключевых кадров, полностью в CSS.
Подвижный блок лево-право
Подвижная область будет передвигаться с лева на право и обратно (Повторений всего 10, скорость 2 сек.)
Указав анимации легко. Вы сначала должны описать эффект анимации с помощью @-webkit-keyframes-правило.
@-webkit-keyframes bounce { from { left: 0px; } to { left: 200px; } }
Как только мы определили, анимации, мы применяем его с помощью -webkit-animation-name и назначаем соответствующие свойства.
div { -webkit-animation-name: bounce; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 10; -webkit-animation-direction: alternate; }
Пульсирующий блок
В этом случае мы указываем анимации с несколько кадров с разными значениями прозрачность, цвет фона и преобразования.
- Войдите, чтобы оставлять комментарии