Как сделать анимацию в css (CSS animations)

CSS transitions и CSS animations

CSS transitions и CSS animations являются мощными инструментами для создания CSS анимаций без использования JavaScript.

CSS transitions позволяют плавно изменять свойства CSS элемента при определенных условиях, таких как наведение курсора или изменение состояния элемента Например, вы можете создать плавное появление или исчезновение элемента, изменение его размеров или цвета, просто определив соответствующие CSS-правила для перехода.

CSS animations предоставляют еще больше возможностей для создания сложных анимаций Вы можете определить ключевые кадры и указать, какие свойства элемента должны изменяться и в какой момент времени Это позволяет создавать более динамичные и интересные анимации, такие как вращение, движение и изменение размеров элементов.

Использование CSS transitions и animations имеет несколько преимуществ Во-первых, это значительно упрощает процесс создания анимаций, так как не требуется написание сложного JavaScript-кода Во-вторых, анимации, созданные с помощью CSS, работают более плавно и эффективно, так как они полностью оптимизированы браузером Кроме того, они могут быть легко настраиваемы и переиспользуемы с помощью CSS-классов и псевдо-классов.

Таким образом, если вы хотите создать анимацию на вашем веб-сайте, вы можете использовать CSS transitions и CSS animations, чтобы достичь желаемого эффекта, без необходимости привлекать JavaScript

После того как некоторые умники полностью (www.demo.donbass-fishing.ru) скопировали мой сайт (дизайн) и выставили его на продажу я решил немного улучшить его и сделать из статических картинок полную анимацию! Теперь практически на всём сайте присудствует движение и на мой взгляд сайт и особенно главная страница стали более интересным для воспиятия!

 

Все современные браузеры, кроме IE9- поддерживают CSS transitions (www.w3.org/TR/css3-transitions) и CSS animations (www.w3.org/TR/css3-animations), которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.

Пример анимации можно посмотреть на этой странице

Как это реализовать рассмотрим ниже:

 

Первая часть создания анимации движения HTML

Ну тут всё просто и понятно:

<div class="progress"></div>

 

Вторая часть создания движения элементов CSS

Сложные анимации CSS движений делаются объединением простых при помощи CSS-правила @keyframes.

В нём задаётся «имя» анимации и правила: что, откуда и куда анимировать. Затем при помощи свойства animation: имя параметры эта анимация подключается к элементу, задаётся время анимации и дополнительные параметры, как её применять.


  /* Современные браузеры, кроме Chrome, Opera, Safari */
  @keyframes go-left-right {   /* назовём анимацию: "go-left-right" */
    from {
      left: 0px;               /* от: left: 0px */
    }
    to {
      left: calc(100% - 50px); /* до: left: 100%-50px */
    }
  }

  /* Префикс для Chrome, Opera, Safari */
  @-webkit-keyframes go-left-right {
    from {
      left: 0px;
    }
    to {
      left: calc(100% - 50px);
    }
  }

  .progress {
    /* применить анимацию go-left-right */
    /* продолжительность 3s */
    /* количество раз: бесконечное (infinite) */
    /* менять направление анимации каждый раз (alternate) */
    animation: go-left-right 3s infinite alternate;
    -webkit-animation: go-left-right 3s infinite alternate;

    position: relative;
    border: 2px solid green;
    width: 50px;
    height: 20px;
    background: lime;
  }

Этот стандарт пока в черновике, поэтому в Chrome, Safari, Opera нужен префикс -webkit.

CSS-анимации позволяют плавно или не очень менять одно или несколько свойств.



Пример анимации

 

Вот и всё!


Отзывы и комментарии

Огромное спасибо Сергею за консультацию, которая прошла по скайпу по созданию анимации стилями нужного мне эффекта опираясь на статью «CSS-анимация движения». По полочкам разложил код, на примере показал работу анимашки на моем сайте. Хочу обратить внимание на его блог , где можно почерпнуть много информации по аннимации объектов. Это целый кладезь полезного кода с живыми примерами. Так держать.

Поповнина Наталья О статье

Блогер «Пчеловодство, сад и огород »

Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!