Как изменить размер элемента после каждой анимации-iteratioin-count?

Question

Как изменить размер элемента после каждой анимации-iteratioin-count?

0

bottom: 0%;} и установите для параметра анимация-итерация значение бесконечность.

Теперь, когда анимация переходит в конечную точку (100%), она снова начинается с начальной точки (0%). Теперь, когда я хочу, когда анимация начинается снова и снова, она должна уменьшать размер элемента, предположим, что размер по умолчанию составляет 200 pixels width and 200 pixels height поэтому уменьшающееся значение равно минус 10 пикселей и когда анимированный элемент становится шириной и высотой 0 пикселей он должен снова увеличить размер этого элемента, чтобы увеличивающееся значение равно плюс 10 пикселей.

Это демонстрация без увеличения и уменьшения элемента.

Bhojendra Nepal 02 дек. 2013, в 05:26

Источник

0

Размер элемента известен? Имеется в виду, что вы знаете, что его размер станет 0 после x числа итераций?
myajouri 02 дек. 2013, в 06:07
0

от 200px до 190px и 180px и 170px .... и последние 0 px теперь размер должен быть перезапущен снова 200px до 190px ,,,,
Bhojendra Rauniyar 02 дек. 2013, в 06:13

Теги:

javascript

jquery

css

css3

animation

2 ответа

Ещё вопросы

Размер элемента известен? Имеется в виду, что вы знаете, что его размер станет 0 после x числа итераций?
от 200px до 190px и 180px и 170px .... и последние 0 px теперь размер должен быть перезапущен снова 200px до 190px ,,,,

vals · Answer 1 · 2013-12-02T15-14-00.000Z

Если ваш браузер поддерживает шаги() в анимации и несколько анимаций, вы можете пойти только с помощью только CSS-решения.

@keyframes esize
{
0%{left: 0%; bottom: 0%;}
100%{left: 90%; bottom: 0%;}
}
@-webkit-keyframes esize
{
    0%{left: 0%; bottom: 0%;}
  100%{left: 90%; bottom: 0%;}
}
@-webkit-keyframes shrink
{
    0%{width: 200px; height: 200px;}
  100%{width: 0px; height: 0px;}
}
@keyframes shrink
{
    0%{width: 200px; height: 200px;}
  100%{width: 0px; height: 0px;}
}

#element{
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background: #000;
    position: absolute;
    left: 0%;
    bottom: 0%;
    animation: esize 3s infinite, shrink 60s steps(20,end) infinite;
    -webkit-animation: esize 3s infinite, shrink 60s steps(20,end) infinite;
}

Я сделал это медленнее, так что вы можете видеть, что изменение размера выполняется шаг за шагом, а не непрерывно

обновленная скрипка

myajouri · Answer 2 · 2013-12-02T05-04-00.000Z

Это можно очистить, но по существу вы можете прослушивать animationStart для захвата начального размера вашего элемента,

$("#element").on("webkitAnimationStart", function(e) {
    var el = $(this);

    initialHeight = el.height();
    initialWidth = el.width();
});

... и слушать animationIteration чтобы изменить размер вашего элемента после каждой итерации:

$("#element").on("webkitAnimationIteration", function(e) {
    var el = $(this),
        currentHeight = el.height(),
        currentWidth = el.width(),
        scaleStep = 10;

    if (currentHeight > 0 && currentWidth > 0) {
        el.height(currentHeight - scaleStep);
        el.width(currentWidth - scaleStep);
    }
    else {
        el.height(initialHeight);
        el.width(initialWidth);
    } 
});

DEMO

Обратите внимание, что это будет работать только в браузерах webkit. Для поддержки других браузеров ознакомьтесь с разделом "Совместимость браузера" в этой статье:

http://www.sitepoint.com/css3-animation-javascript-event-handlers/

в демке размер даже не уменьшается.