身高不能轉換工作CSS

我的代碼是很簡單但我沒有得到如何過渡工作以及如何它不會在我的HTML就在這裏工作：身高不能轉換工作CSS

<div id="footer"> 
    <div id="footer1"> 
     <p> This should be a footer </p> 
    </div> 
</div>

和我的CSS

 #footer { 
     position: fixed; 
     bottom: 0; 
     background-color: black; 
     min-width: 100%; 
     font-family: Agency FB; 
     transition: width 3s; 
    } 
    #footer1 { 
     text-align: center; 
     color: #4e4e4e; 

    } 
    #footer:hover { 

     opacity: .8; 
     color: white; 
     height: 100px; 
    }

我沒有看到我的代碼有什麼問題。那還是我還沒有經驗。謝謝！

來源

2016-08-20 Dinklefarts

'＃footer'元素需要一個固定的數字高度來開始動畫，它不會從'auto'過渡到'100px'。 – mch

試試這個：https://jsfiddle.net/maky/bgeLbpd9/ – fernando

這裏有一些很好的學習資源[mdn]（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions ）和[css-tricks]（https://css-tricks.com/almanac/properties/t/transition/） – Dhaval

試試這個

#footer { 
    position: fixed; 
    bottom: 0; 
    background-color: black; 
    min-width: 100%; 
    font-family: Agency FB; 
    transition: height 3s; 
    height: 50px; 
} 
#footer1 { 
    text-align: center; 
    color: #4e4e4e; 

} 
#footer:hover { 

    opacity: .8; 
    color: white; 
    height: 100px; 
}

如果它不能正常工作，請告訴我

來源

2016-08-20 08:27:37 Bisquitue

哦，上帝......我很盲目。無論如何，我發現了，但是我花了很長時間才意識到，DreamWeaver CS6的「實時」查看器出於某種原因不能播放動畫。無論如何，我將確保下次在Chrome上進行測試XD – Dinklefarts

@Dinklefarts哈哈掙扎 – Bisquitue

#footer { 
 
     position: absolute; 
 
     bottom:0; 
 
     background-color: black; 
 
     min-width: 100%; 
 
     height:50px; 
 
     font-family: Agency FB; 
 
     transition: width 3s, height 1s, transform 1s; 
 
    } 
 
    #footer1 { 
 
     text-align: center; 
 
     color: #4e4e4e; 
 
    } 
 
    #footer:hover { 
 
     opacity: .8; 
 
     color: white; 
 
     height: 100px; 
 
    }

<div id="footer"> 
 
    <div id="footer1"> 
 
     <p> This should be a footer </p> 
 
    </div> 
 
</div>

只是玩弄的transition: width 3s, height 1s, transform 1s;

乾杯值！

來源

2016-08-20 08:36:47 Bishop

身高不能轉換工作CSS

回答

相關問題