Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.01.2014, 15:54
Кандидат Javascript-наук
Отправить личное сообщение для FanAizu Посмотреть профиль Найти все сообщения от FanAizu
 
Регистрация: 08.03.2011
Сообщений: 148

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 анимация.
Ответить с цитированием
  #2 (permalink)  
Старый 16.01.2014, 15:57
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

просто используй transition, а не animation

у меня такая библиотека в процессе, но всё никак её не допишу
Ответить с цитированием
  #3 (permalink)  
Старый 16.01.2014, 15:59
Кандидат Javascript-наук
Отправить личное сообщение для FanAizu Посмотреть профиль Найти все сообщения от FanAizu
 
Регистрация: 08.03.2011
Сообщений: 148

Сообщение от melky Посмотреть сообщение
просто используй transition, а не animation

у меня такая библиотека в процессе, но всё никак её не допишу
дело в том, что мне нужна цикличная анимация, а transition не поддерживает цикличности
Ответить с цитированием
  #4 (permalink)  
Старый 16.01.2014, 16:28
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от FanAizu Посмотреть сообщение
дело в том, что мне нужна цикличная анимация, а transition не поддерживает цикличности
ага, точно

ну, если бы можно было менять параметры анимации после её применения, то была бы сказка - поставил 'animation-direction: reverse;' в ':hover' и всё норм

боюсь, пока эту проблему никак не решить. Либо будет дёргаться, как сейчас, либо нужно переносить анимацию на JS (хотя цикличные скриптованные transitions должны прокатить. см. Zepto, у неё вроде есть возможность анимировать через transitions)
Ответить с цитированием
  #5 (permalink)  
Старый 16.01.2014, 16:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,267

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CSS анимация после :target gJam (X)HTML/CSS 0 01.08.2013 22:42
Выборка по значению css Telnet jQuery 5 29.05.2011 17:47