Keyframes are not needed. Positioning top won't work if you don't have a positioned element - meaning you need to add position: relative; to box and content.
https://codepen.io/tomliv/pen/poeXrvr On Tue, Jun 22, 2021 at 6:03 PM Karl DeSaulniers <k...@designdrumm.com> wrote: > > You need the @keyframes to make it animate I believe. > > HTH, > > Best, > Karl > > Sent from losPhone > > > On Jun 22, 2021, at 1:58 PM, Aaron Gray <aaronngray.li...@gmail.com> wrote: > > > > The following is animated using height, which is like drawing a curtain :- > > > > https://jsfiddle.net/AaronNGray/kf0br46u/31/ > > > > HTML > > <div id="box"> > > <div id="content">AaronNGray</div> > > </div> > > > > CSS > > body { > > margin: 0px; > > padding: 0px; > > } > > #box { > > height: 100px; > > width: auto; > > background: transparent; > > transition: all 0.4s ease-in-out; > > } > > #content { > > overflow: hidden; > > width: auto; > > background: white; > > height: 0px; > > transition: all 0.4s ease-in-out; > > border-bottom: 2px solid black; > > -webkit-transition: all .8s ease; > > -moz-transition: all .8s ease; > > -ms-transition: all .8s ease; > > -o-transition: all .8s ease; > > transition: all .8s ease; > > } > > #box:hover > #content { > > height: 50px; > > top: 0px; > > } > > > > What I need is to be able to animate 'top' so the content div slides > > downwards. > > > > This is what I have tried but it does not work.:- > > > > https://jsfiddle.net/AaronNGray/kf0br46u/38/ > > > > body { > > margin: 0px; > > padding: 0px; > > } > > #box { > > height: 100px; > > top: -50px; > > width: auto; > > background: transparent; > > transition: top 0.4s ease-in-out; > > } > > #content { > > overflow: hidden; > > width: auto; > > background: white; > > top: -50px; > > height: 50px; > > transition: top 0.4s ease-in-out; > > border-bottom: 2px solid black; > > -webkit-transition: top .8s ease; > > -moz-transition: top .8s ease; > > -ms-transition: top .8s ease; > > -o-transition: top .8s ease; > > } > > #box:hover > #content { > > top: 50px; > > } > > > > Hope you can help and its something simple I am missing, usually is :) > > > > Regards, > > > > Aaron > > -- > > Aaron Gray > > > > Independent Open Source Software Engineer, Computer Language Researcher, > > Information Theorist, and amateur computer scientist. > > ______________________________________________________________________ > > css-discuss [css-d@css-discuss.org] > > http://www.css-discuss.org/mailman/listinfo/css-d > > List wiki/FAQ -- http://css-discuss.incutio.com/ > > List policies -- http://css-discuss.org/policies.html > > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > ______________________________________________________________________ > css-discuss [css-d@css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 ______________________________________________________________________ css-discuss [css-d@css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
