css3新特性transition

CSS3新特性Transition

CSS3是一个旨在扩展CSS2.1的模块化规范，其中包含了一系列新的特性，其中之一就是Transition。

Transition是指在CSS属性从一种状态变为另一种状态时，为其提供过渡效果的方式。

 /* 声明一个2秒的过渡效果 */
    transition: all 2s;
    
    /* 声明一个1秒的过渡效果，仅作用于颜色变化 */
    transition: color 1s;
    
    /* 声明多个属性的过渡效果，每个属性有不同的过渡时间 */
    transition: background-color 2s,color 1s,transform .5s; 

在过渡效果中，您可以指定CSS属性在何时开始过渡，何时结束过渡，以及其间隔的持续时间。这样一来，您可以获得非常平滑的、渐进式的元素状态过渡。

最常用的过渡属性是“transition-property”，它用于指定应用过渡效果的CSS属性名称。例如，您可以让一个按钮在被鼠标点击时发生背景颜色变化：

 /* 在按钮上添加一个过渡效果 */
    button {
      background-color: blue;
      transition-property: background-color;
      transition-duration: 1s;
    }

    /* 鼠标悬停时改变按钮颜色 */
    button:hover {
      background-color: green;
    } 

总的来说，Transition这个新特性使得CSS更加灵活，让您能够创建更加生动的Web页面。当然，在实践中，您需要充分了解Transition的所有属性，以便在构建动态页面时更有自信。