/*定義公共淡入淡出效果 fadenum*/

@-webkit-keyframes fadenum{ /*設置內容由顯示變為隱藏*/

0%{opacity: 0;}

100%{opacity: 1;}

}

@-moz-keyframes fadenum{ /*設置內容由顯示變為隱藏*/

0%{opacity: 0;}

100%{opacity: 1;}

}

@-o-keyframes fadenum{ /*設置內容由顯示變為隱藏*/

0%{opacity: 0;}

100%{opacity: 1;}

}

@keyframes fadenum{ /*設置內容由顯示變為隱藏*/

0%{opacity: 0;}

100%{opacity: 1;}

}

/*元素使用該效果*/

.demo{

width: 300px;

height: 200px;

background: red;

-webkit-animation: fadenum 4s ease;

-moz-animation: fadenum 4s ease;

animation:fadenum 4s ease;

}

總結

以上是生活随笔為你收集整理的animation css逐渐消除,css3动画控制元素淡入淡出显示效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。