CSS3: классный эффект, распахивающее меню

Кодинг /

CSS

25.11.2012

job

5225

Лежа на диване, попивая горячий глинтвейн и предвкушая открытие горнолыжного сезона одновременно листая странички в интернете на белом как снег смартфоне HTC One X, нашел славненький эффект развертывания подменю на технологии CSS3.

Жаба не давит, поэтому решил поделиться се творением с читателями блога.

Черт, только стал входить во вкус написания приложений под Windows 8 используя JavaScript, как все больше и больше нравятся возможности CSS3, позволяющие отказаться от JS фреймворков, таких как jQuery, Mootools. Пожалуй стоит сделать небольшой фак по анимации css, так для себя что бы далеко не лазить.

собственно вот и сама css анимация:

	#menu li:hover > ul {

		padding: 15px 0;
		background: #333;
		opacity: 1;
		visibility: visible;
		box-shadow: 1px 1px 7px rgba(0,0,0,.5);
		animation-name: swingdown;
		animation-duration: 1s;
		animation-timing-function: ease;

	}

	@keyframes swingdown {
		0% {
			opacity: .99999;
			transform: rotateX(90deg);
		}

		30% {			
			transform: rotateX(-20deg) rotateY(5deg);
			animation-timing-function: ease-in-out;
		}

		65% {
			transform: rotateX(20deg) rotateY(-3deg);
			animation-timing-function: ease-in-out;
		}

		100% {
			transform: rotateX(0);
			animation-timing-function: ease-in-out;
		}
	}

а это html анимации:

	<div id="container">
		<ul id="menu">
			<li><a href="#">Главная</a></li>
			<li><a href="#">О нас</a>
				<ul>
					<li><a href="#">История создания</a></li>
					<li><a href="#">Новости компании</a></li>
					<li><a href="#">Хочу спать</a></li>
				</ul>
			</li>
			<li><a href="#">Портфолио</a>
				<ul>
					<li><a href="#">Веб-дизайн</a></li>
					<li><a href="#">Интерьер</a></li>
					<li><a href="#">Ладшафтный дизайн</a></li>
					<li><a href="#">Баннеры</a></li>
					<li><a href="#">Логотип компании</a></li>
					<li><a href="#">Плакаты</a></li>
				</ul>
			</li>
			<li><a href="#">Клиенты</a>
				<ul>
					<li><a href="#">МосГорСуд</a></li>
					<li><a href="#">БанкМосква</a></li>
					<li><a href="#">ООН</a></li>
				</ul>
			</li>
			<li><a href="#">Наши контакты</a>
				<ul>
					<li><a href="#">МосГорСуд</a></li>
					<li><a href="#">БанкМосква</a></li>
					<li><a href="#">ООН</a></li>
				</ul>
			</li>
		</ul>
	</div>

Посмотреть демо, и скачать исходник можно тут и там, а также картинка сверху активная.

В общем всем спасибо, переползаю назад на диван.