С помощью только одних правил стилей CSS, можно добиться очень интересной анимации различных элементов. Вот есть яркий пример на основе плагина для WordPress Animate It! или отдельная анимация иконок. А также еще примеры с border анимацией, текста и многое, многое другое.
А в этом кратком обзоре сделаем анимацию background в виде движущихся облаков, которую можно было бы использовать в качестве шапки сайта. Получится очень стильно и динамично, а если проявить интерес, то возможно добавить какой-то летающий объект: дирижабль, самолет, воздушный шар и т.д.
<div class="satic-area">
<header class="top-header">
<h1>Анимация background css <span>A Background Image Animation</span></h1>
</header>
<div class="dynamic-area1"></div>
<div class="dynamic-area2"></div>
</div>
/* Header */
.top-header{
padding: 1em 0 1em;
letter-spacing: -1px;
text-align: center;
}
.top-header h1 {
color: #fff;
font-weight: 600;
font-size: 3em;
line-height: 1;
margin-bottom: 0;
text-shadow: 2px 5px rgba(0,0,0,0.1);
}
.top-header h1 span {
display: block;
font-size: 60%;
font-weight: 400;
padding: 0.8em 0 0.5em 0;
color: #fff;
}
/*stop. Header */
.satic-area {
position: relative;
width: 100%;
height: 100%;
background: url(../img/poster-about.jpg) no-repeat center;
background-size: cover;
}
.dynamic-area1 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(../img/poster-drop-animate2.png) repeat-x 0px 0px;
background-size: cover;
-webkit-animation: posterDrop1 6000s linear infinite;
-moz-animation: posterDrop1 6000s linear infinite;
-o-animation: posterDrop1 6000s linear infinite;
animation: posterDrop1 6000s linear infinite;
}
@-webkit-keyframes posterDrop1 { from { background-position: 0 0; } to { background-position: 4000% 0; } }
@-moz-keyframes posterDrop1 { from { background-position: 0 0; } to { background-position: 4000% 0; } }
@-o-keyframes posterDrop1 { from { background-position: 0 0; } to { background-position: 4000% 0; } }
@keyframes posterDrop1 { from { background-position: 0 0; } to { background-position: 4000% 0; } }
.dynamic-area2 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(../img/poster-drop-animate1.png) repeat-x 0px 0px;
background-size: cover;
-webkit-animation: posterDrop2 8000s linear infinite;
-moz-animation: posterDrop2 8000s linear infinite;
-o-animation: posterDrop2 8000s linear infinite;
animation: posterDrop2 8000s linear infinite;
}
@-webkit-keyframes posterDrop2 { from { background-position: 0 0; } to { background-position: 30000% 0; } }
@-moz-keyframes posterDrop2 { from { background-position: 0 0; } to { background-position: 30000% 0; } }
@-o-keyframes posterDrop2 { from { background-position: 0 0; } to { background-position: 30000% 0; } }
@keyframes posterDrop2 { from { background-position: 0 0; } to { background-position: 30000% 0; } }
