CSS3淡入之前/之後的內容

Question

我有以下懸停效果，現在我該如何淡入淡出？

HTML

<article> 
    hello world 
</article> 

CSS

article 
{ 
    position: relative; 
    float: left; 
    margin: 0 16px 16px 0; 
    padding: 10px; 
    width: 228px; 
    height: 228px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    overflow: hidden; 
    background: green; 
} 

article:hover:after 
{ 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 322px; 
    height: 322px; 
    background: #fff; 
    -webkit-transform: translate(-161px, -161px) rotate(135deg); 
    -moz-transform: translate(-161px, -161px) rotate(135deg); 
    transform: matrix(-161px, -161px) rotate(135deg); 
    opacity: 0.5; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

JSFiddle

Answer 1

你的元素不會改變，或者如果你沒有起點和終點移動。你想要做的是先設置你的article:after，然後設置當你把鼠標懸停在文章上時應該是什麼。類似這樣的：http://jsfiddle.net/E8dNe/1/

article:after { 
    content: '×'; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 322px; 
    height: 322px; 
    background: #fff; 
    opacity: 0; 
    -webkit-transition: 1s all ease-in-out; 
} 

article:hover:after {  
    -webkit-transform: translate(-161px, -161px) rotate(135deg); 
    opacity: .5; 
}