HTML前端开发之路--Transition_html/css_WEB-ITnose

Transition属性简介，transition属性有三个子属性， property，duration和time-function，property指的是变化的属性，duration指的是变化时间，time-function值得是过渡动画的形式；

transition的三个自属性可以一起卸载transition当中，例如

transition: background-color 1s linear;
 

也可以分开来写，例如

transition-property: background-color;
transition-duration: 1s;
transition-timing-function: linear; 

具体实现见以下代码示例：

 
 
 
     
      
     
        div{
            background-color: #5cafa5;
            padding: 10px;
            width: 100px;
            height: 100px;
            margin: 200px auto;
            color: black;
            text-align: center;
            /*transition: background-color 1s linear;*/
            /*transition-property: background-color;*/
            /*transition-duration: 1s;*/
            /*transition-timing-function: linear;*/
 transition:background-color 1s linear,
                        height 1s linear,
                        transform 1s linear,
                        color 1s linear,
                        width 1s linear;
        }
        div:hover{
            background-color: brown;
            transform: rotate(360deg);
            height: 200px;
            width: 200px;
            color: white;
        }
     
 
 
 dration（整个动画执行时间）
timing-function（过渡动画的形式）-->
实例文字

      
查看更多关于HTML前端开发之路--Transition_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did110951