Избледняването на едно изображение, докато другото използва CSS преходи при непрозрачност, не е гладко?

Поставих две изображения едно върху друго (едното черно-бяло, а другото цветно) и създадох CSS преход, при който непрозрачността на едно изображение намалява, докато другото се увеличава. Резултатът е цветен ефект при задържане.

Все пак имам проблем: в даден момент по време на прехода можете да видите малко през изображението, което показва, че преходът на непрозрачността не е линеен, въпреки че свойството "transition-timing-function" е зададено на линейно.

Ако беше включено някакво квадратично облекчаване, щях да разбера защо се случва това, но не трябва да има?

(причината да подхождам към това с чист CSS е, че все още не съм се справил напълно с JQuery)

Някакви идеи как мога по-добре да внедря тази функционалност?

Моят CSS е по-долу или посетете този JSFiddle.

#container { width: 210px; height: 150px; display:block; border: 4px solid #ccc; position:relative; overflow:hidden; margin: 10px 0 0 10px;}

.image { width: 210px; height: 150px; display:block; position:absolute; left: 0px; top:0px; }

#dbw { 
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    background: url("http://oi42.tinypic.com/x0y2ky.jpg"); 
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
}

#dco { 
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    background: url("http://oi40.tinypic.com/28gwcrb.jpg"); 
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
}

#container:hover #dbw { 
    filter: alpha(opacity=0); 
    opacity: 0; 
    transform: scale(1.1);
    -ms-transform: scale(1.1); 
    -webkit-transform: scale(1.1);
}

#container:hover #dco { 
    filter: alpha(opacity=100); 
    opacity: 1; 
    transform: scale(1.1);
    -ms-transform: scale(1.1); 
    -webkit-transform: scale(1.1);
}

css opacity css-transitions
person Orun    schedule 18.09.2013    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Проблемът не е, че преходът не е линеен, а просто, че ако поставите две непрозрачни изображения едно върху друго, фонът винаги е частично видим.

Например, когато преходите са в средата, и двете изображения са 50% непрозрачни. Долното изображение покрива 50% от фона, а горното изображение покрива 50% от останалите 50% от фона, оставяйки 25% от фона да свети.

Просто оставете долното изображение непрозрачно и оставете горното изображение да поеме прехода:

http://jsfiddle.net/qvcRf/4/

т.е. премахнете прехода на непрозрачността на долното изображение:

#container:hover #dbw { 
  transform: scale(1.1);
  -ms-transform: scale(1.1); 
  -webkit-transform: scale(1.1);
}
person Guffa    schedule 18.09.2013