css實現元素淡入淡出

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0; /*初始狀態 透明度為0*/
    }
    50% {
        opacity: 0; /*中間狀態 透明度為0*/
    }
    100% {
        opacity: 1; /*結尾狀態 透明度為1*/
    }
}

.show {
    -webkit-animation-name: fadeIn; /*動畫名稱*/
    -webkit-animation-duration: 1s; /*動畫持續時間*/
    -webkit-animation-iteration-count: 1; /*動畫次數*/
    -webkit-animation-delay: 0s; /*延遲時間*/
}

上為淡入 ， 淡出反着寫