Анимация для сайта CSS


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

Анимация вращения на CSS

Анимация вращение может пригодится для некоторых декоративных элементов на сайте, для баннеров и различных эффектов для привлечения внимания. В данном примере показана анимация вращения картинки, но так же это может быть и блок.

Пример

HTML


<div class="animation-bg">
  <img class="img-rotation" src="image.png"/>
</div>
      

CSS


.animation-bg{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #042548;
    height: 350px;
}
.img-rotation {
    width: 200px;
    -webkit-animation-name: rotation;
    -webkit-animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotation;
    -moz-animation-duration: 15s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -o-animation-name: rotation;
    -o-animation-duration: 15s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
    animation-name: rotation;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
 
@-webkit-keyframes rotation {
    0% {-webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);}
}
@-moz-keyframes rotation {
    0% {-webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);}
}
@-o-keyframes rotation {
    0% {-webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);}
}
@keyframes rotation {
    0% {-webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);
        -moz-transform:rotate(720deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);}
}	

     

Анимация звездного неба на CSS

Анимация звездного неба иногда требуется для шапки сайта, так же ее можно вставить для отдельных элементов в виджете или фона. Цвет фона и звезды можно установить на свой вкус.

Пример

HTML


<div class="stars">
  <div class="stars_1"></div>
  <div class="stars_2"></div>
  <div class="stars_3"></div>
</div>
      

CSS


.stars {
  position: relative;
  overflow: hidden;
  height: 350px;
  margin-bottom: -350px;
  background: #042548;
}
.stars_1, .stars_2, .stars_3{
  position: absolute;
  top: 0;
  left: 0;  
  width: 100%;
  height: 100%; 
  opacity: 0;  
  background: url('image1.png');  
  -webkit-animation: stars 5s linear infinite;
  animation: stars 5s linear infinite;
}
.stars_2 {
  background-position: 100px 100px;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.stars_3 {
  background-image: url('image2.png');
  background-position: 350px 100px;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
@-webkit-keyframes stars {
  0%, 50%, 100% {opacity: 0;}
  1%, 49% {opacity: 1;}
}
@keyframes stars {
  0%, 50%, 100% {opacity: 0;}
  5%, 45% {opacity: 1;}
}
     

Анимация звездопада на CSS

Анимация звездопада может пригодиться для фона сайта, или отдельных элементов, чтобы придать глубины и полноты всему дизайну. Звезды и цвет фона можно изменить на свой вкус.

Пример

HTML


<div class="animation-bg">
  <div class="bg-ex-stars"></div>
</div>
      

CSS


.animation-bg{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #042548;
  height: 350px;
}
.bg-ex-stars {
  background: url('image.png'); /* Путь к картинке */
  background-position: 0 0;
  background-repeat: repeat;
  animation: animated-bg 60s linear infinite;
  width: 100%;
  height: 350px;
}
@keyframes animated-bg {
  from { background-position: 0 0; }
  to { background-position: 0 1000px; }
}
     

Анимация снежинок на CSS

Анимация снежинок прекрасно подойдет в новогоднее время, такой анимацией можно украсить как весь сайт, так и отдельные его элементы. Фон и снежинки можно заменить на такие, которые подойдут для вашего дизайна.

Пример

HTML


<div class="animation-bg">
  <div class="bg-ex-snowflake"></div>
</div>
      

CSS


.animation-bg{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #042548;
  height: 350px;
}
.bg-ex-snowflake {
  background: url('image.png'); /* Путь к картинке */
  background-position: 0 0;
  background-repeat: repeat;
  animation: animated-snowflake 60s linear infinite;
  width: 100%;
  height: 350px;
}
@keyframes animated-snowflake {
  from { background-position: -800px 0; }
  to { background-position: 0 800px; }
}
     

Анимация облаков на CSS

Анимация облаков может пригодиться для шапки сайта, либо для баннера. Анимация на CSS не нагрузит сайт и придаст ему уникальный дизайн. Цвет фона и облака можно заменить на другие.

Пример

HTML


<div class="animation-bg">
  <div class="bg-ex-sky"></div>
</div>
      

CSS


.animation-bg{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #042548;
  height: 350px;
}
.bg-ex-sky {
  background: url('image.png'); /* Путь к картинке */
  background-position: 0 0;
  background-repeat: repeat;
  animation: animated-sky 60s linear infinite;
  width: 100%;
  height: 350px;
}
@keyframes animated-sky {
  from { background-position: 800px 0; }
  to { background-position: 0 0; }
}
     

Фон для сайта с анимацией CSS

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

Пример

Lorem Ipsum

HTML


<div class="bg-ex-animation">Lorem Ipsum</div>
      

CSS


.bg-ex-animation {
  background: url(image.jpg); /* Путь к картинке */
  background-position: 0 0;
  background-repeat: repeat;
  animation: animated-bg 60s linear infinite;
  width: 100%;
  height: 350px;
}
@keyframes animated-bg {
  from { background-position: 0 0; }
  to { background-position: 0 1000px; }
}