css3 отказывается перейти правильно

У меня возникли проблемы с css и переход. Я могу заставить его либо совершить плавный переход (где он скользит), либо мгновенный переход (я бы хотел, чтобы он был плавным эффектом затухания)css3 отказывается перейти правильно

Мое решение должно быть чистым html/css. (Я не хочу обезьян с javascript/jquery и тому подобное)

Живой пример на my website. (Я хотел бы, чтобы мой конечный результат был переход средней иконки, но постепенный)

Я использую спрайт для изображений.

Вот источник тока:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#navlist{position:relative;} 
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} 
#navlist li, #navlist a{height:32px;display:block;} 

#home{left:0px;width:32px;} 
#home a{background:url('http://www.aeonsplice.com/testicons.png') 0 0;} 
#home a:hover{background: url('http://www.aeonsplice.com/testicons.png') 0 32px;-webkit-transition:0.5s;} 

#prev{left:32px;width:32px;} 
#prev a{background:url('http://www.aeonsplice.com/testicons.png') 32px 0;} 
#prev a:hover{background: url('http://www.aeonsplice.com/testicons.png') 32px 32px;-webkit-transition:0.5s fade;} 

#next{left:64px;width:32px;} 
#next a{background:url('http://www.aeonsplice.com/testicons.png') 64px 0;} 
#next a:hover{background: url('http://www.aeonsplice.com/testicons.png') 64px 32px;-webkit-transition:0.5s linear;} 
</style> 
</head> 

<body> 
<ul id="navlist"> 
    <li id="home"><a href="#"></a></li> 
    <li id="prev"><a href="#"></a></li> 
    <li id="next"><a href="#"></a></li> 
</ul> 
</body> 
</html>

источник

2013-07-24 Athix

Не только вам нужно обеспечить '-webkit-переход: 0.5s fade;', но вы также должны включить '-moz-transition: 0.5s fade;' и 'переход: 0.5s fade' –

Мне известно другие переходы браузера, но они просто избыточны, когда я использую тестовую страницу только с одним браузером (хром/webkit). – Athix

вы должны использовать прозрачность, чтобы сделать эффект замирания

здесь ваш CSS http://jsfiddle.net/3jqcX/

#navlist { 
    position:relative; 
} 
#navlist li { 
    margin:0; 
    padding:0; 
    list-style:none; 
    position:absolute; 
    top:0; 
} 
#navlist li, #navlist a { 
    height:32px; 
    display:block; 
} 
#home { 
    left:0px; 
    width:32px; 
} 
#home a { 
    background:url('http://www.aeonsplice.com/testicons.png') 0 0; 
} 
#home a:hover { 
    background: url('http://www.aeonsplice.com/testicons.png') 0 32px; 
    -webkit-animation:fade 0.5s 
} 
#prev { 
    left:32px; 
    width:32px; 
} 
#prev a { 
    background:url('http://www.aeonsplice.com/testicons.png') 32px 0; 
} 
#prev a:hover { 
    background: url('http://www.aeonsplice.com/testicons.png') 32px 32px; 
    -webkit-animation: fade 0.5s; 
} 
#next { 
    left:64px; 
    width:32px; 
} 
#next a { 
    background:url('http://www.aeonsplice.com/testicons.png') 64px 0; 
} 
#next a:hover { 
    background: url('http://www.aeonsplice.com/testicons.png') 64px 32px; 
    -webkit-animation: fade 0.5s; 
} 
@-webkit-keyframes fade { 
    0% { 
     opacity:0; 
    } 
    50% { 
     opacity:0.5; 
    } 
    100% { 
     opacity:1 
    } 
}

источник

2013-07-24 04:07:20 Hushme

Он имеет тот же эффект, что и выцветание. (мгновенный переход) Изменен первый значок на непрозрачность, чтобы показать его. – Athix

Я создал скрипку, пожалуйста, проверьте ссылку – Hushme

Работает как шарм. В частности, бит @ -webkit-keyframes бит. :) – Athix

Вы не можете непосредственно кроссфейд между области изображения с использованием CSS3. Атрибут затухания недействителен для этих обстоятельств. Однако вы можете кроссфейд между двумя разными изображениями.

Вот ссылка, которая будет объяснить: http://css3.bradshawenterprises.com/cfimg/

источник

2013-07-24 04:08:45

Так будет ли работать два спрайта, или мне придется иметь отдельные изображения для каждого значка? (Возможность использования спрайтов настоятельно рекомендуется) – Athix

Во-первых, выцветанию не предопределенная функция смягчения ... так что вам придется использовать стандартную легкость, как вы для #next , Кроме того, необходимо установить переход на #prev в как так:

#prev a{ 
    background:url('http://www.aeonsplice.com/testicons.png') 32px 0; 
    -webkit-transition: all 0.5s; 
} 
#prev a:hover{ 
    background: url('http://www.aeonsplice.com/testicons.png') 32px 32px; 
}

Чтобы выцветает 2 изображения легко, не добавляя к разметке ... просто изменить цвет фона на другое изображение (т.е. testicons-парения.. png) ... насколько я знаю, все браузеры, поддерживающие переходы, пересекают изображения.

источник

2013-07-24 04:15:08 ericjbasti

css3 отказывается перейти правильно

ответ

Смежные вопросы