• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Знакомство со свойством анимации CSS animation (Поюробно с анимацией в CSS3: гайд для начинающих)
Знакомство со свойством анимации CSS animation
Kosten
Дата: Четверг, 2018-06-28, 19:14 | Сообщение 1
Администраторы
Сообщений:18469
Награды: 55


Анимация CSS предлагает восемь различных свойств для управления анимацией. Некоторые из них сопоставимы с аналогично названными свойствами перехода. Свойство animation-name определяет список анимаций, разделенных запятыми, для применения к данному селектору. Он похож на свойство перехода, поскольку он в конечном итоге определяет свойства, которые анимируются. С свойством перехода эти свойства явно называются. С именем анимации @keyframes правило явно указано, и это правило содержит свойство, которые будут анимированным.

Человеческий мозг старался обратить внимание на движущиеся объекты. Из-за этого естественного рефлекса, чтобы заметить движение, добавление анимации на ваш сайт или приложение является мощным способом привлечь внимание пользователей к важным областям вашего продукта и добавить интерес к вашему интерфейсу.



CSS-анимация предлагает множество различных параметров, которые вы можете настроить:

animation-name -  имя анимации, которая ссылается на анимацию, созданную с использованием ключевых кадров;

animation-duration -  как долго анимация должна длиться, в секундах;

animation-timing-function  -  синхронизации, используемая анимацией, общие значения: линейная, легкость;

animation-delay -  необязательное количество секунд до начала анимации;

animation-iteration-count -  сколько раз анимация должна выполняться;

animation-direction -  направление анимации, где быть нормальным, обратным и альтернативным или чередующимся обратным. В последних 2 он чередуется вперед, а затем назад;

animation-fill-mode -  определяет, как стилизовать элемент, когда анимация заканчивается, после того, как закончится номер его итерации. Ни один, ни обратно не возвращаются к первым стилям ключевого кадра. Нападающие и оба используют стиль, установленный в последнем ключевом кадре;

animation-play-state -  если она установлена ​​на паузу, она приостанавливает анимацию:

Свойство animation является обобщающим для всех этих свойств, в следующем порядке:

Код
.container {
  animation: name
             duration
             timing-function
             delay
             iteration-count
             direction
             fill-mode
             play-state;
}


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

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

В любом случае рассмотрели, как простая CSS-анимация работает достаточно подробно. Вы узнали все о том, как объявить анимацию с использованием свойства анимации и как работает правило @keyframes с его правилами стиля ключевого кадра. То, что мы видели, это всего лишь часть всего, что вы можете сделать с помощью анимации CSS
Прикрепления: 5933021.png(44.7 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 2018-06-29, 02:06 | Сообщение 2
Администраторы
Сообщений:18469
Награды: 55


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

Анимация - это процесс изменения формы и создания движений с элементами.

@keyframes

Keyframes будет управлять промежуточными шагами анимации в CSS.

Пример ключевых кадров с левой анимацией

Код
@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}
div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}


В приведенном выше примере показаны высота, ширина, цвет, имя и продолжительность анимации с синтаксисом ключевых кадров

Перемещение левой анимации

Код
<html>
   <head>
   
      <style type="text/css">
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
      
   </head>
   <body>
      <h1>Tutorials Point</h1>
      <p>this is an example of moving left animation .</p>
   <button onclick="myFunction()">Reload page</button>
      <script>
           function myFunction() {
           location.reload();
           }
      </script>
   </body>
</html>


Перемещение левой анимации с ключевыми кадрами

Код
<html>
   <head>
   
      <style type="text/css">
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
      
   </head>
   <body>
      <h1>Tutorials Point</h1>
      
      <p>This is an example of animation left with an extra keyframe to make text changes.</p>
   <button onclick="myFunction()">Reload page</button>
      <script>
           function myFunction() {
           location.reload();
           }
      </script>
   </body>
</html>


Демонстрация

Если вы все еще не поняли, то просто помните, что ваши ключевые кадры не имеют понятия времени. У них есть только концепция процента. Свойство анимации с его значением продолжительности помогает создать недостающую связь между ключевыми кадрами и временем. Как только вы поймете все это, вы столкнетесь с серьезным препятствием, чтобы понять, что делает ваша анимация CSS.
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Знакомство со свойством анимации CSS animation (Поюробно с анимацией в CSS3: гайд для начинающих)
  • Страница 1 из 1
  • 1
Поиск: