Анимированное лого Firefox OS

18.08.2013 16:50
1
CSSFirefoxграфикадизайн
Увидел анимированное лого на сайте Firefox OS и не смог пройти мимо :-)
Во-первых очень красиво нарисовано, во-вторых чистая CSS анимация!

Все кадры анимации собраны по горизонтали в один длинный файл:



Анимация реализована с помощью изменения background-position по горизонтали.

Задается количество кадров step(44), время смены кадра 3.75 и указание, что анимация бесконечная - infinite. Кроме того заданы два кадра - начальный и конечный с нужным background-posiiton в каждом.
Таким образом задается шаг приращения background-position = ( background-position последнего кадра - background-position первого кадра ) / количество кадров.

Код на CSS на первый взгляд громоздкий, но это из-за огромного количества вендорных префиксов:

#ffLogo {
	background: url("firefoxlogo.png") no-repeat scroll 0px 0px transparent;
	width: 156px;
	height: 156px;
 
	margin: auto;
 
	-webkit-animation: ffLogoAni 3.75s steps(44) infinite;
	-moz-animation: ffLogoAni 3.75s steps(44) infinite;
	-ms-animation: ffLogoAni 3.75s steps(44) infinite;
	-o-animation: ffLogoAni 3.75s steps(44) infinite;
	animation: ffLogoAni 3.75s steps(44) infinite;
}
 
@keyframes "ffLogoAni" {
	0% {
    		background-position: -6864px 0;
	}
	100% {
    		background-position: 0 0;
	}
}
 
@-moz-keyframes ffLogoAni {
	0% {
		background-position: -6864px 0;
	}
	100% {
		background-position: 0 0;
	}
}
 
@-webkit-keyframes "ffLogoAni" {
	0% {
		background-position: -6864px 0;
	}
	100% {
		background-position: 0 0;
	}
}
 
@-ms-keyframes "ffLogoAni" {
	0% {
		background-position: -6864px 0;
	}
	100% {
		background-position: 0 0;
	}
}
 
@-o-keyframes "ffLogoAni" {
	0%	{
		background-position: -6864px 0;
	}
	100% {
		background-position: 0 0;
	}
}

Скачать firefoxLogo.zip

Все файлы демки одним архивом
скачать

18.08.2013, Protocoder
Rem25.11.2019 16:35:27#ответить
nice thanks man !!
Написать комментарий