Затухание при смене изображения при использовании CSS3?

Мне было интересно, можно ли вообще указать на неоткрывающийся класс на изображении?

То, что я пытаюсь достичь, - это когда кто-то нависает над изображением, которое он затухает, а затем, когда они отключаются, исчезает?

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

http://jsfiddle.net/L7XCD/

Ответ 1

Это должно сработать для вас! http://jsfiddle.net/L7XCD/1/

Для объяснения этого используйте большую документацию mozilla:

Transition rovide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period.

Также мы использовали функции синхронизации времени (легкость, линейность, легкость, простота, простота в использовании)

Timing functions determine how intermediate values of the transition are calculated. The timing function can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier

Разметка CCS:

img {
    opacity: 0.6;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
img:hover {
    opacity: 1.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}

Поскольку он использовал переходную процедуру для перехода, я подумал, что лучше использовать одну и ту же функцию перехода.

Для получения дополнительной информации см. документацию

Надеюсь, что это поможет!

Ответ 2

http://jsfiddle.net/L7XCD/2/ Просто добавьте эффект перехода к элементу без тега hover