css анимация, плавный вовзрат к начальному значению
Если для анимации использовать transition + превдокласс :hover, то когда мышку убираешь с элемента, то происходит плавный возврат к начальному значению css свойств элемента(которые были до анимации). Сейчас я использую @keyframes анимацию и свойство animation, но здесь почемуто, если убрать мышку с элемента, происходит резкий возврат к начальным значениям css свойств элемента(которые были до анимации), вместо плавного. Как сделать плавный переход?
Вот код анимации
.pBut-aPulse:hover
{
-webkit-animation:pBut-aPulse 0.5s infinite;
-o-animation: pBut-aPulse 0.5s infinite;
-moz-animation: pBut-aPulse 0.5s infinite;
animation: pBut-aPulse 0.5s infinite;
}
@-o-keyframes pBut-aPulse
{
50%
{
-ms-transform:scale(1.1, 1.1);
-webkit-transform:scale(1.1, 1.1);
-o-transform:scale(1.1, 1.1);
-moz-transform:scale(1.1, 1.1);
}
100%
{
-ms-transform:scale(1, 1);
-webkit-transform:scale(1, 1);
-o-transform:scale(1, 1);
-moz-transform:scale(1, 1);
}
}
@-webkit-keyframes pBut-aPulse
{
50%
{
-ms-transform:scale(1.1, 1.1);
-webkit-transform:scale(1.1, 1.1);
-o-transform:scale(1.1, 1.1);
-moz-transform:scale(1.1, 1.1);
}
100%
{
-ms-transform:scale(1, 1);
-webkit-transform:scale(1, 1);
-o-transform:scale(1, 1);
-moz-transform:scale(1, 1);
}
}
@-moz-keyframes pBut-aPulse
{
50%
{
-ms-transform:scale(1.1, 1.1);
-webkit-transform:scale(1.1, 1.1);
-o-transform:scale(1.1, 1.1);
-moz-transform:scale(1.1, 1.1);
}
100%
{
-ms-transform:scale(1, 1);
-webkit-transform:scale(1, 1);
-o-transform:scale(1, 1);
-moz-transform:scale(1, 1);
}
}
@keyframes pBut-aPulse
{
50%
{
-ms-transform:scale(1.1, 1.1);
-webkit-transform:scale(1.1, 1.1);
-o-transform:scale(1.1, 1.1);
-moz-transform:scale(1.1, 1.1);
}
100%
{
-ms-transform:scale(1, 1);
-webkit-transform:scale(1, 1);
-o-transform:scale(1, 1);
-moz-transform:scale(1, 1);
}
}
И может кто-нибудь знает библиотеку какую-нибудь, которая делает следующее: использует css3 анимацию, если браузер поддерживает css3 анимацию, либо использует jQuery анимацию, если не поддерживается css3 анимация. |
просто используй transition, а не animation
у меня такая библиотека в процессе, но всё никак её не допишу |
Цитата:
|
Цитата:
ну, если бы можно было менять параметры анимации после её применения, то была бы сказка - поставил 'animation-direction: reverse;' в ':hover' и всё норм боюсь, пока эту проблему никак не решить. Либо будет дёргаться, как сейчас, либо нужно переносить анимацию на JS (хотя цикличные скриптованные transitions должны прокатить. см. Zepto, у неё вроде есть возможность анимировать через transitions) |
FanAizu,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
(function(e) {var a = null, d = e.fn.css; e.fn.css = function(b, i) {null===a&&(a = "undefined"!=typeof e.cssProps? e.cssProps: "undefined"!=typeof e.props? e.props: {}); if("undefined"==typeof a.transform&&("transform"==b||"object"==typeof b&&"undefined"!=typeof b.transform)) {var f = a, l; b: {l = this.get(0); for(var c =["transform", "WebkitTransform", "msTransform", "MozTransform", "OTransform"], j; j = c.shift();) {if("undefined"!=typeof l.style[j]) {l = j; break b}}l = "transform"}f.transform = l}if("transform"!=a.transform) {if("transform"==b) {if(b = a.transform, "undefined"==typeof i&&jQuery.style) {return jQuery.style(this.get(0), b)}}else {"object"==typeof b&&"undefined"!=typeof b.transform&&(b[a.transform] = b.transform, delete b.transform)}}return d.apply(this, arguments)}})(jQuery);
</script>
<script>
(function(j)
{function i(e) {var c = e.data("_ARS_data"); c||(c = {rotateUnits: "deg", scale: 1, rotate: 0}, e.data("_ARS_data", c)); return c}function d(e, c) {e.css("transform", "rotate("+c.rotate+c.rotateUnits+") scale("+c.scale+","+c.scale+")")}j.fn.rotate = function(e) {var c = j(this), f = i(c); if("undefined"==typeof e) {return f.rotate+f.rotateUnits}if(e = e.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/)) {e[3]&&(f.rotateUnits = e[3]), f.rotate = e[1], d(c, f)}return this}; j.fn.scale = function(e) {var c = j(this), f = i(c); if("undefined"==typeof e) {return f.scale}f.scale = e; d(c, f); return this};
var b = j.fx.prototype.cur; j.fx.prototype.cur = function() {return"rotate"==this.prop? parseFloat(j(this.elem).rotate()): "scale"==this.prop? parseFloat(j(this.elem).scale()): b.apply(this, arguments)}; j.fx.step.rotate = function(e) {var c = i(j(e.elem)); j(e.elem).rotate(e.now+c.rotateUnits)}; j.fx.step.scale = function(c) {j(c.elem).scale(c.now)};
var a = j.fn.animate; j.fn.animate = function(e) {if("undefined"!=typeof e.rotate) {var c, f = e.rotate.toString().match(/^(([+-]=)?(-?\d+(\.\d+)?))(.+)?$/); f&&f[5]&&(c = j(this), c = i(c), c.rotateUnits = f[5]); e.rotate = f[1]}return a.apply(this, arguments)}}
)(jQuery);
</script>
<style type="text/css">
.content{
left: 200px;
top: 50px;
position: absolute;
}
</style>
</head>
<body>
<div class="content"><img src="http://img0.liveinternet.ru/images/attach/c/1/50/252/50252124_ej_wall1.jpg" width="200" class="circle1"></div>
<script>
var content = $('.content img').hover(large, small);
function large() {
content.stop().animate({
scale: '1.5'
}, 500, function () {
content.animate({
scale: '1'
}, 500, large)
})
}
function small() {
content.stop().animate({
scale: '1'
}, 500)
}
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 21:06. |