CSS3 Transition Smooth Transition menu bar implementation

This time to bring you CSS3 transition smooth transition menu bar implementation, to achieve the transition Smooth transition menu bar of the notice, the following is the actual case, together to see.

The three major properties of CSS3 Animation (transform,transition,animation) The Transition property is described below. The Transition property is a shorthand property with four properties: Transition-property, Transition-duration, Transition-timing-function, and Transition-delay.

Grammar

Transition:property duration timing-function delay;

Property:

value	Description
Transition-property	To specify the name,transition effect of a CSS property
Transition-duration	Transition effect requires a specified number of seconds or milliseconds to complete
Transition-timing-function	Specifies the speed curve of the transition effect
Transition-delay	Define when the transition effect starts

A case is given below

Look first:

Schematic diagram:

When you move the mouse over the menu list, add a hover style. That is, the top value of P.wrap is set to negative. The Transition property is then used to smooth the transition.

Full Demo

<!--html--><style>. menu{margin:100px Auto;        }. Menu ul li{Float:left;        width:50px;        height:25px;        Background-color: #2aabd2;        margin-right:5px;        line-height:25px;        position:relative;    Overflow:hidden;        }. Menu ul li a{display:block;        height:25px;        width:50px;        Text-align:center;        line-height:25px;    Color:white;        }. Menu ul li. awrap{position:absolute;        top:0;    left:0;        }. Menu ul li. awrap:hover{transition:all. 3s ease-in;    top:-25px;                }</style><p class= "Menu Clearfix" > <ul> <li> <p class= "Awrap" >            <a href= "" ><i class= "fa fa-cog" ></i></a> <a href= "" > Menu </a> </p> </li> <li> <p class= "Awrap" > <a href= "" >& Lt;i class= "FA Fa-star-o "></i></a> <a href=" "> Menu </a> </p> </li> <li> <p class= "Awrap" > <a href= "" ><i class= "fa fa-user" ></i&gt            ;</a> <a href= "" > Menu </a> </p> </li> <li>                <p class= "Awrap" > <a href= "" ><i class= "fa fa-search" ></i></a> <a href= "" > Menu </a> </p> </li> <li> <p class= "Awra P "> <a href=" "><i class=" fa fa-adn "></i></a> <a href=" "> Menu & lt;/a> </p> </li> </ul></p>

Note: Where icons use font icons Awesome, you need to know to search for font Awesome

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 pointer-events use of the detailed

Focus-within the use of a detailed

CSS3 Make Seamless Carousel ads