Анимация в CSS3

В данной статье мы рассмотрим пример использования анимации в CSS3.  Приятно осознавать тот факт, что в скором будущем все браузеры без исключения будут поддерживать  CSS3. 

Синтаксис

animation: name duration timing-function delay iteration-count direction;

Пример использования css3 animation

Заставим наш блок пульсировать

@keyframes resize {
	0% {
		border-radius: 10px;
	}
	50% {
		width:150px; height: 150px;
		border-radius: 100px;
		background-color:rgba(255,0,0,0.2);
	}
	100% {
		border-radius: 10px;
		background-color:rgba(255,0,0,0.9);
	}
}

В начале мы должны описать имя анимации (animation-name) используя для этого CSS3 правило @keyframes. В нашем примере @keyframes состоит из трех частей, но ограничений по количеству @keyframes и частей - нет.

#box {
	margin: 100px auto;
	width: 100px;
	height: 100px;
	background: #333;
}
#box:hover{
	animation-name: resize;
	animation-duration: 3s;
	animation-iteration-count: 4;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

Из кода выше видно, что для #box мы задали начальные свойства, в @keyframes мы задаем свойства блока на каждой части анимации, для #box:hover - задаем непосредственно параметры анимации.

Наведите курсором мыши:

На самом деле код для данного примера немного больше т.к. необходимо учитывать прихоти каждого браузера, в результате получаем:

@keyframes resize {
	0% {
		border-radius: 10px;
	}
	50% {
		width:150px; height: 150px;
		border-radius: 100px;
		background-color:rgba(255,0,0,0.2);
	}
	100% {
		border-radius: 10px;
		background-color:rgba(255,0,0,0.9);
	}
}

@-moz-keyframes resize {
	0% {
		border-radius: 10px;
	}
	50% {
		width:150px; height: 150px;
		border-radius: 100px;
		background-color:rgba(255,0,0,0.2);
	}
	100% {
		border-radius: 10px;
		background-color:rgba(255,0,0,0.9);
	}
}

@-webkit-keyframes resize {
	0% {
		border-radius: 10px;
	}
	50% {
		width:150px; height: 150px;
		border-radius: 100px;
		background-color:rgba(255,0,0,0.2);
	}
	100% {
		border-radius: 10px;
		background-color:rgba(255,0,0,0.9);
	}
}

@-ms-keyframes resize {
	0% {
		border-radius: 10px;
	}
	50% {
		width:150px; height: 150px;
		border-radius: 100px;
		background-color:rgba(255,0,0,0.2);
	}
	100% {
		border-radius: 10px;
		background-color:rgba(255,0,0,0.9);
	}
}

@-o-keyframes resize {
	0% {
		border-radius: 10px;
	}
	50% {
		width:150px; height: 150px;
		border-radius: 100px;
		background-color:rgba(255,0,0,0.2);
	}
	100% {
		border-radius: 10px;
		background-color:rgba(255,0,0,0.9);
	}
}

#box {
	margin: 100px auto;
	width: 100px;
	height: 100px;
	background: #333;
}
#box:hover{
	-webkit-animation-name: resize;
	-moz-animation-name: resize;
	-ms-animation-name: resize;
	-o-animation-name: resize;
	animation-name: resize;

	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	-ms-animation-duration: 3s;
	-o-animation-duration: 3s;
	animation-duration: 3s;

	-webkit-animation-iteration-count: 4;
	-moz-animation-iteration-count: 4;
	-ms-animation-iteration-count: 4;
	-o-animation-iteration-count: 4;
	animation-iteration-count: 4;

	-webkit-animation-direction: alternate;
	-moz-animation-direction: alternate;
	-ms-animation-direction: alternate;
	-o-animation-direction: alternate;
	animation-direction: alternate;

	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;
	-ms-animation-timing-function: ease-in-out;
	-o-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}

Еще пример применения CSS3 animation

В этом примере animation-iteration-count: infinite; - это означает что наша анимация будет повторяться вечно 🙂

 CSS код примера

@-webkit-keyframes glow {
	0% {
		-webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
		border-color: rgba(0,0,255,0.5);
	}
	100% {
		-webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
		border-color: rgba(0,0,255,1.0);
	}
}
@-moz-keyframes glow {
	0% {
		-moz-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
		border-color: rgba(0,0,255,0.5);
	}
	100% {
		-moz-box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
		border-color: rgba(0,0,255,1.0);
	}
}
@-o-keyframes glow {
	0% {
		box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
		border-color: rgba(0,0,255,0.5);
	}
	100% {
		box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
		border-color: rgba(0,0,255,1.0);
	}
}
@keyframes glow {
	0% {
		box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
		border-color: rgba(0,0,255,0.5);
	}
	100% {
		box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
		border-color: rgba(0,0,255,1.0);
	}
}
#box {
	width:255px;
	margin:10px auto;
}
#box button {
		width: 255px;
		height: 35px;
		background: #cde;
		border: 2px solid #ccc;
		border-color: rgba(0,0,255,0.5);
		font-size:18px;
		color: #000;
		text-shadow: rgba(20, 20, 20, 0.5) 1px 1px 5px;
		text-align: center;
		-webkit-border-radius: 16px;
		-moz-border-radius: 16px;
		border-radius: 16px;
		-webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
		box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
	}
#box button:hover  {
	background-color:#cce;
	-webkit-animation-name: glow;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;

	-moz-animation-name: glow;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-moz-animation-timing-function: ease-in-out;

	-o-animation-name: glow;
	-o-animation-duration: 1s;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: alternate;
	-o-animation-timing-function: ease-in-out;

	animation-name: glow;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}}

(2 голосов. Рейтинг: 5,00 из 5)

Загрузка...

Метки: CSS, CSS3, стили

Рубрика: CSS