Transition properties are comma delimited in all browsers that support transitions: .nav a { transition: color .2s, text-shadow .2s; } ease is the default timing function, so you don’t have to specify it. If you really want linear, you will need to specify it: transition: color .2s linear, text-shadow .2s linear; This starts to get … Read more
Method 1: If you are looking for a self-invoking transition then you should use CSS 3 Animations. They aren’t supported either, but this is exactly the kind of thing they were made for. CSS #test p { margin-top: 25px; font-size: 21px; text-align: center; -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein … Read more
Syntax: transition: <property> || <duration> || <timing-function> || <delay> [, …]; Note that the duration must come before the delay, if the latter is specified. Individual transitions combined in shorthand declarations: -webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s; -moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s; -o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s; … Read more
You can concatenate two transitions or more, and visibility is what comes handy this time. div { border: 1px solid #eee; } div > ul { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } div:hover > ul { visibility: visible; opacity: 1; } <div> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> … Read more
Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get. See JSFiddle demo provided by Chris Jordan in another answer here. #menu #list { max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; background: #d5d5d5; } #menu:hover #list { max-height: 500px; transition: max-height … Read more