Всем привет!

Сегодня мы сделаем баннерную рекламу с помощью анимации CSS.

HTML код будет выглядеть следующим образом:

<!DOCTYPE html>
<html>
	<head>
		<title>Баннерная реклама</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
			<div class="banner">
				<div class="animated">
					<div class="text1">
							Только сейчас
					</div>
					<div class="text2">
							скидка 40% на все товары
					</div>
				</div>	
			</div>
	</body>
</html>

Для блока div с классом banner добавим следующие CSS свойства

.banner{
	width: 600px;
	height: 120px;
	background-color: #777;
	position: relative;
}

И для внутреннего блока с классом animated добавим CSS свойства:

.animated{
	opacity: 0.8;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #34495e;
	animation: banner 6s infinite;
}

И для 2-х блоков которые будут анимированы, это блоки с классами text1 и text2

.text1, .text2{
	position: absolute;
	width: 100%;
	height: 100%;
	line-height: 120px;
	text-align: center;
	font-size: 40px;
	color: #fff;
	opacity: 0;
}
.text1{
	animation: text1 6s infinite;
}
.text2{
	animation: text2 6s infinite;
}

И саму анимацию

@keyframes text1{
	10%{opacity: 1;}
	40%{opacity: 0;}
}
@keyframes text2{
	30%{opacity: 0;}
	60%{opacity: 1;}
}
@keyframes banner{
	10%{background-color: #008978;}
	40%{background-color: #34495e}
	80%{background-color: green;}
}

Результат будет следующим: