CSS3 ANIMATION EXAMPLE
We Offer the Best CSS3 Animation Example
BOOK FOR FREE DEMO CLASS
Book DemoPure CSS Course by a Famed best Pure CSS courses in Delhi & Pure CSS Training Courses Institute in Delhi
Teacher
SANJAY JAIN
Category
CSS ANIMATE WORK
Pure CSS HTML Animated Dropdown Menu
- home
- home
- home
- home
- home
- home
- home
- home
- home
- home
- home
- home
- home
- home
- home
- home
- home
Coding of this example
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
@keyframes myanimation{ 0%{height:0;overflow:hidden; } 99.99%{height:200px;overflow:hidden; } 100% {height:200px;overflow:visible; } } ul{width:800px; height:50px; padding:0; margin:0; } li{width:200px; height:50px; float:left; list-style-type:none;line-height:50px; background-color:red; text-align:center; color:white; } li:hover {background-color:yellow; color:red; } ul li ul{height:0px; overflow:hidden; width:200px; } ul li ul li{ position:relative; } ul li ul li ul{position:absolute; left:200px; top:0; } ul li:hover ul{height:200px; animation:myanimation 2s; overflow:visible; } ul li:hover ul li ul{display:none; } ul li ul li:hover ul{display:block; } </style>
</head>
<body>
<ul>
<li>home
<ul>
<li>home1
<ul>
<li>homea</li>
<li>homeb</li>
<li>homec</li>
<li>homed</li>
</ul>
</li>
<li>home2</li>
<li>home3</li>
<li>home4
<ul>
<li>homee</li>
<li>homef</li>
<li>homeg</li>
<li>homeh</li>
</ul>
</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
</ul>
</body>
</html>
After Effect Course
Course Period : 1 Months
Training Type : Classroom(Offline) | Online | Home Tuitions
