2016-06-12 70 views
0

我正在使用CSS3模糊淡出效果,我想在图像再次显示时反转效果。我试图创建的是淡入淡出,尽管我似乎无法逆转我的课.home-holder.in中的效果。css反转模糊淡出效果

CSS:

.home-holder.out{ 
    -webkit-filter: blur(8px); 
    -webkit-transform: scale(1.4, 1.4); 
    opacity: 0.25; 
    -webkit-transition: all 0.25s ease-out; 
    transition: all 0.25s ease-out; 
    visibility: hidden; 
} 

.home-holder.in{ 
    -webkit-filter: blur(8px); 
    -webkit-transform: scale(1.4, 1.4); 
    -webkit-transition: all 0.25s ease-in; 
    transition: all 0.25s ease-in; 
    visibility: visible; 
} 
+0

您使用的是相同的'filter'在这两个州,因此不会成为尖锐的,对不对?我误解了你的问题吗? – Harry

回答

1

也许改变。在类的模糊为0px?

.home-holder.in { 
    -webkit-filter: blur(0px); 
    -webkit-transform: scale(1.4, 1.4); 
    -webkit-transition: all 0.25s ease-in; 
    transition: all 0.25s ease-in; 
    visibility: visible; 

http://codepen.io/anon/pen/OXNMvj

+0

谢谢,我已经删除了'-webkit-transform:scale(1.4,1.4);'因为图像尺寸被放大了。 –