CSS3 Webkit CSS анимации: изменение размера DIV прямоугольник

Question

Я пытаюсь понять, если можно повторить метод animate в Jquery, используя WebKit анимацию

Предполагая, что у меня есть DIV 50px на 50 рх с помощью JQuery я могу легко изменять размеры и анимировать его с помощью:

$('#mybox').animate({'width':'100px','height':'70px'}, 300) 

// so from 50x50 it animates to 100x70 
// the values 100 and 70 should ba dynamically 
// input so i can create a function (Width,Height) to alter my box 

Интересно, как сделать то же самое, если это возможно с помощью CSS WebKit анимации

PS. Мне не нужно их работать в Firefox, это просто проект для Safari/Chrome

Answer 1

Вы можете использовать этот CSS:

div.mybox { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    -webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    -moz-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    -o-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    transition:width 300ms ease-in-out, height 300ms ease-in-out; 
} 

Затем вы можете обновить свойства ширины и высоты с помощью JQuery:

$(document).ready(function() { 
    $("div.mybox").css({"width": "100px", "height": "70px"}); 
}); 

Таким образом, если браузер поддерживает, это будет анимировано. Но, конечно, рассмотрим возможность размещения этих свойств в отдельный класс и добавление этого класса к элементу. Вы можете использовать функцию .addClass(), как это.

$(document).ready(function() { 
    $("div.mybox").addClass("enlarged"); 
}); 

Или, например, вы можете использовать его с функцией toggleClass и событие щелчка (поле будет увеличено при нажатии, и будет меняться к нормальному размеру, когда снова нажмите).

$(document).ready(function() { 
    $("div.mybox").click(function() { 
     $(this).toggleClass("enlarged"); 
    }); 
}); 

В этом случае свойства должны быть определены в классе CSS.

div.mybox.enlarged { 
    width: 100px; 
    height: 70px; 
} 

Кроме того, если вы хотите, чтобы анимация произойти при наведении мыши, то все, что вам нужно добавить это:

div.mybox:hover { 
    width: 100px; 
    height: 70px; 
} 

Анимации такого рода могут быть выполнены без использования JS вообще.

Также вы должны прочитать о CSS3 transition attribute и функциях преобразования (они могут использоваться во многих случаях). Они описаны here.

Answer 2

@keyframes animationName { 
    0% {width: 50px; height:50px} 
    100% {width: 100px; height:70px} 
} 

посмотри на это: http://www.css3files.com/animation/

Answer 3

Вы можете использовать CSS-анимацию и переходы с «динамическими» значениями, применяя CSS в качестве нового STYLESHEET или встроенного стиля, как и в этом случае:

http://jsfiddle.net/4zD74/

Answer 4

CSS3 сделает это очень легко для вас! Он добавит переход, и вы можете изменить размеры с помощью :hover. Вот образец div:

<div id="mydiv"> 
    <!-- Div content goes here --> 
</div> 

Итак, ваш div является «mydiv».Остальное сделано в CSS3:

#mydiv { 
    width: 50px; 
    height: 50px; 
    background: #f34543; 
    -webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    -moz-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    -o-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    transition:width 300ms ease-in-out, height 300ms ease-in-out; 
} 
#mydiv:hover { 
    width: 100px; 
    height: 70px; 
} 

JSFiddle: http://jsfiddle.net/dakoder/ZGHLM/

Вот именно! Он изменит его размер от 50x50px до 100x70px. Протестировано в Chrome, но не Safari.