Question

This is the code

HTML

<div id="footmain">
    <div id="col1" class="mark"></div>
    <div id="col2" class="mark"></div>
    <div id="col3" class="mark"></div>
    <div id="col4" class="mark"></div>
</div>

see an example here with the CSS that I have:

http://jsfiddle.net/EtBKx/8/

I need to drop it down with transition, starting slowly, going fast, finish slowly.
jQuery is the last way, cause I want to be without JavaScript and for multiple browsers and CPU speeds.

To be compatible with tablets and smartphones, is better to have a trigger in the bottom right of each tab, with the both functions of hover and clicked?, or a <“a”>Direction<“/a”> link that can be clicked once to drop and one more to go to the direction?

Answer 1

I modified your fiddle a bit:
http://jsfiddle.net/EtBKx/17/

basically all I added was

    *vendorprefix*-transition: height ease 1s;

“ease” defines an animation that starts slow, becomes fast and ends slow.
Oh and you had .mark :hover (with a space), which didn’t work, .mark:hover is what you’ll want.

More about transitions:
http://www.w3schools.com/css3/css3_transitions.asp
http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp