1.代码展示

    /*渐进增强*/
    .div1 {
        -webkit-transition: all 2s; //Safari Chrome
           -moz-transition: all 2s; //Firefox
             -o-transition: all 2s; //Opera
                transition: all 2s; 
    }

    /*优雅降级*/
    .div1 {
                transition: all 2s; 
             -o-transition: all 2s; //Opera
           -moz-transition: all 2s; //Firefox
        -webkit-transition: all 2s; //Safari Chrome
    }

带CSS3前缀的3个满足了大部分浏览器，而不带前缀的只有最新的一部分浏览器才支持。

• 渐进增强（progressive enhancement）：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，当浏览器支持时，它们会自动地呈现出来并发挥作用。

• 优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

2.如何选择

“渐进增强”观点认为应关注于内容本身。内容是建立网站的诱因，我们应该在满足向绝大部分用户呈现有用内容的前提下，再做渲染内容或更高级功能的事情。
“优雅降级”观点则认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段。
因此：决定采用哪种方式取决于网站所面向的主要用户群体（或者说主要兼容的浏览器）。