CSS fluid motion of links

When a user hovers the mouse over navigation bar, the links represent a fluid type motion. padding, margin, position, float, animation properties are used to make fluid type navigation bar.

Example

Place the cursor over the links to see the animation effects.

We'll perform the following steps to complete the project.

#fluidMotion ul

Firstly, we'll make a navigation bar.

Example

<style>
#fluidMotion ul{
 width:auto;
 height:auto;
 background:rgba(200,200,200,0.5);
 border-radius:8px;
 padding:30px;
 list-style-type:none;
 float:left;
}
</style>
Try </>

list-style-type:none; removes the list item markers from the list.
padding is the space around the list items.
width and height properties should be set to auto.
float:left; must be used so that it covers the links completely.

#fluidMotion ul li

The list items are block level elements. But list items can float in a line afterwards.

Example

<style>
#fluidMotion ul li{
float:left;
}
</style>
Try </>

float:left; property aligns the list items on the left side.

#fluidMotion ul li a

Now we'll design the links.

Example

<style>
#fluidMotion ul li a{
text-decoration:none;
padding:20px;
color:white;
}
</style>
Try </>

text-decoration:none; removes the line under the text.
padding:20px; is the space around the anchor text.

:hover

When a user hovers the mouse over the link, an animation should be occurred.

Example

<style>
#fluidMotion ul li a:hover{
animation:fluidmotion 0.5s infinite alternate;
}
</style>
Try </>

fluidmotion is the name of animation.
0.5s is the animation-duration of the animation.
infinite means the animation should occur as long as the user hovers the mouse over the navigation bar.
alternate value means that if there is a zoom-in effect in one cycle, then there will be zoom-out effect in next cycle.

Animation

The keyframe rule should be used to make the animation. The animation-duration is divided into five intervals.

Example

<style>
@-webkit-keyframes fluidmotion{
0%{
	animation-timing-function:ease-in;
	zoom:100%;
}
20%{
	zoom:104%;
	animation-timing-function:ease-in;
}
40%{
	zoom:108%;
	animation-timing-function:ease-in;
}
60%{
	zoom:112%;
	animation-timing-function:ease-in;
}
80%{
	zoom:116%;
	animation-timing-function:ease-in;
}
100%{
	zoom:120%;
	animation-timing-function:ease-in;
}

}
</style>
Try </>

The animation-duration of one cycle is 0.5 second. There is zoom-in effect in one cycle, then there is zoom-out effect in the next cycle.