Исчезать / исчезать в силу с CSS3

Question

Я пытаюсь создать эффект затухания / затухания с помощью анимации CSS3.Вот мой CSS:

#buttonright, #buttonleft{
-webkit-transition:opacity 0.5s linear;
-moz-transition:opacity 0.5s linear;
-o-transition:opacity 0.5s linear;
-ms-transition:opacity 0.5s linear; 
transition:opacity 0.5s linear;
}

И Javascript (я использую jquery):

$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
$('#buttonleft').css("opacity","1");
$('#buttonright').css("opacity","1");

Похоже, браузер считает глупым устанавливать непрозрачность на 0, а затемустановите его обратно на 1. Есть ли у кого-нибудь возможное решение?

Спасибо.

Answer 1

Редактировать: Считайте ответ Яки за чистое решение CSS3.

Вы не даете браузеру достаточно времени для завершения перехода. Если вы добавите setTimeout к последним операторам, это должно сработать.

Примерно так:

$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
setTimeout(function(){$('#buttonleft').css("opacity","1");}, 5000);
setTimeout(function(){$('#buttonright').css("opacity","1");}, 5000);

Answer 2

Фактически принятое решение не является решением CSS3 (для него все еще требуется некоторый код JavaScript). Пожалуйста, проверьте код ниже.

HTML:

<a id='buttonleft'>Button left</a>
<a id='buttonright'>Button right</a>

CSS:

 #buttonleft, #buttonright {
    text-align: left;
    background: rgb(180,180,255);
    opacity:0.5;

    /* property duration timing-function delay */
    -webkit-transition: opacity 500ms linear 100ms;
    -moz-transition: opacity 500ms linear 100ms;
    -o-transition: opacity 500ms linear 100ms;
    transition: opacity 500ms linear 100ms;
    }

#buttonleft:hover, #buttonright:hover {
    opacity: 1.0;
}

Answer 3

Вы можете использовать CSS3-анимацию теперь, когда она более поддерживается, чем когда вы задавали оригинальный вопрос.Я создал jsFiddle, показывающий, как это сделать при наведении курсора .

@keyframes demo {
    from {
      animation-timing-function: ease;
      opacity: 1;
    }
    50% {
      animation-timing-function: ease-in;
      opacity: 0;
    }
    to {
      animation-timing-function: ease-inout;
      opacity: 1;
    }
}

img:hover
{
    animation-delay: 0s;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-name: demo;
}

Answer 4

как то так?

$('#button').hover(
    function() { 
        $(this).animate({opacity: 0}, 500); 
    },
    function() { 
        $(this).animate({opacity: 1}, 500);
    }
);