Css animation keyframes rotate

Содержание

CSS анимация @keyframes + 7 примеров
Обращение к блоку ключевых кадров
Бесконечная анимация
Остановка анимации
Пошаговая анимация
Бесконечная анимация вращения на CSS
Мини-туториал по анимации в CSS и HTML5
Практические примеры
Анимация спиннера загрузки
Анимированная форма авторизации
Заключение
Что думаете?

CSS анимация @keyframes + 7 примеров

В первой строчке, после ключевого слова @keyframes идёт название анимации, scaling , к ней мы будем обращаться далее.

После объявления прописываются «шаги анимации» — кадры, в % от всей длительности анимации. Обратите внимание, что между 0% и 100% вы можете вставлять сколько угодно промежуточных значений, будь-то 30%, 75% или даже 94%.

Обращение к блоку ключевых кадров

 animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

Это сокращённая форма записи, описание каждого свойства ниже:

animation-name	Название анимации, к которой происходит обращение из @keyframes
animation-duration	Продолжительность или выполнение анимации. Может задаваться в секундах s или миллисекундах ms
animation-timing-function	Временная функция, динамика изменения свойства, подсматривать можно здесь http://htmlbook.ru/css/transition-timing-function
animation-delay	Время задержки анимации До начала.
animation-iteration-count	Количество повторов анимации (infinite — бесконечно, также можно задать простое число без единиц измерения)
animation-direction	Направление анимации, последовательно, в обратную стороно или «туда-обратно» (normal — анимация проигрывается от начала до конца и останавливается. alternate — проигрывается от начала до конца и в обратном направлении. alternate-reverse — проигрывается с конца до начала и обратно. reverse — анимация проигрывается с конца.
animation-play-state	Управление проигрыванием анимации (paused (пауза), running (запуск), . ). Можно применить на :hover или из функции JavaScript при необходимости
animation-fill-mode	Состояние элемента до и после воспроизведения анимации. Например, значение backwards позволяет вернуть все свойства к исходному состоянию сразу после применения анимации

 animation: animationname 3s linear 2s infinite reverse

В примере описано обращение к блоку @keyframes animationname, продолжительность выполнения анимации 3 секунды, линейная динамика, пауза перед запуском 2 секунды, анимация повторяется бесконечно и выполняется в обратную сторону.

Бесконечная анимация

 @keyframes moving  0%  transform: translate(0, 0); > 30%  transform: translate(50px, 0); > 60%  transform: translate(50px, 50px); > 100%  transform: translate(0, 50px); > > div  width: 50px; height: 50px; background-color: #3debff; animation: moving 2s infinite; >

В данном примере значение infinite задает проигрывание анимации от начала до конца, и затем в обратном направлении

Остановка анимации

 @keyframes turning  0%  border-radius: 0 0 0 0; transform: rotate(0deg); > 25%  border-radius: 50% 0 0 0; transform: rotate(-45deg); > 50%  border-radius: 50% 50% 0 0; transform: rotate(-90deg); > 75%  border-radius: 50% 50% 50% 0; transform: rotate(-135deg); > 100%  border-radius: 50% 50% 50% 50%; transform: rotate(-180deg); > > div  animation: turning 1s infinite alternate; > div:hover  animation-play-state: paused; >

Здесь проигрывание анимации прирывается как только пользователь навел мышь на элемент, это происходит за счет установки animation-play-state: paused;

Пошаговая анимация

@keyframes steps  10%  transform: translate(60px, 0); > 20%  transform: translate(120px, 60px); > 30%  transform: translate(180px, -60px); > 40%  transform: translate(240px, 0); > 50%  transform: translate(300px, 60px); > 60%  transform: translate(360px, -60px); > 70%  transform: translate(420px, -120px); > 80%  transform: translate(480px, 60px); > 90%  transform: translate(540px, 0); > > div  animation: steps 5s infinite step-end; >

Пошаговая анимация задается параметром animation-timing-function со значением step-end

Источник

Бесконечная анимация вращения на CSS

Всем доброго времени суток. Ранее на href.kz уже публиковался пост про то как сделать анимацию вращения элемента при наведении курсора. Сегодня изобретем колесо рассмотрим похожий эффект, отличие будет в том, что вращение элемента будет происходить самостоятельно, без каких-либо воздействий со стороны пользователя. Для этого мы будет использовать возможности CSS3 для анимации. Подобные эффекты так же часто могут использоваться в веб-разработке, для различных целей, начиная от прогресс-баров, заканчивая анимацией вращения колеса автомобиля. Задачи в общем то могут быть абсолютно разные.

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

Первым делом, добавляем наше изображение на страницу:

После этого, прописываем такой CSS код:

Итак, теперь немного пояснения значений CSS свойств для тега img.
animation-name – мы задали имя анимации, в нашем случае это «rotation»;
animation-duration — время в секундах, за которое происходит цикл вращения;
animation-iteration-count – количество повторений, в нашем случае – бесконечно;
animation-timing-function – тип анимации, в нашем случае линейный (равномерный) – «linear»;

Теперь самое время прописать саму анимацию:

Здесь, как вы, наверное, уже смогли догадаться заданы ключевые кадры анимации «rotation». Положение элемента на начальном этапе цикла (0%) указано 0 градусов, положение на конечном этапе цикла (100%) — 360 градусов. Таким образом анимация вращения будет происходить от 0 до 360 градусов, далее цикл будет повторяться. Всё довольно просто не так ли.

А вот полный CSS-код, особенность его в том, что здесь сделано для учета особенностей всех браузеров:

img < margin-top:20px; width: 200px; -webkit-animation-name: rotation; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: rotation; -moz-animation-duration: 5s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -o-animation-name: rotation; -o-animation-duration: 5s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; animation-name: rotation; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; >@-webkit-keyframes rotation < 0% 100% > @-moz-keyframes rotation < 0% 100% > @-o-keyframes rotation < 0% 100% > @keyframes rotation < 0% 100% >

Источник

Мини-туториал по анимации в CSS и HTML5

За годы работы с Front End технологиями мне приходилось работать с разными способами анимации. В этой статье я хочу подробнее разобрать, как работает анимация в CSS без использования JavaScript.

В CSS есть свойство animation, которое позволяет анимировать практически любое свойство HTML элемента. Правило анимации указывается в блоке keyframes.

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

Senior/ Middle FrontEnd (React) Developer Центр HR TECH (Проект Атомкор) АО «Гринатом» , , можно удалённо , По итогам собеседования

Давайте рассмотрим пример, где мы меняем цвет фона у элемента.

Создадим в HTML элемент с классом «element»:

В CSS создаем правило для анимации в блоке keyframes. Назовем анимацию changeColor. Анимация будет менять цвет фона объекта с красного на синий.

@keyframes changeColor < 0% < background-color: red; >100% < background-color: blue; >>

Здесь 0% — это начало анимации, 100% — это конец анимации. Все что между движок CSS автоматически анимирует в плавное изменениe свойста, которое вы выбрали. В данном случае будет плавное изменение цвета.

Теперь добавим эту анимацию как свойство animation в CSS стилях для элемента. Наш CSS будет выглядеть таким образом:

Результат данной анимации будет выглядеть так:

Мы можем контролировать анимацию при помощи дополнительных свойств.

В данном примере после имени анимации мы указали скорость анимации (2s) и количество повторений (в данном случае бесконечное количество повторений infinite).

Существует несколько свойств анимации. Рассмотрим каждый из них:

animation-name: имя анимации определенным правилом keyframes
animation-duration: сколько времени займет один цикл анимации от 0% до 100%
animation-timing-function: определяет кривые ускорения, такие как ease и linear
animation-delay: время задержки между моментом загрузки элемента в браузере и началом анимации.
animation-direction: указывает направление анимации. По умолчанию анимация идет от 0% до 100%. С помощью данного свойства можно сделать так, чтобы анимация шла в обратную сторону от 100% до 0% или каждый раз меняла направление.
animation-iteration-count: количество повторений цикла анимации. Можно установить число или указать infinite для бесконечного повторения анимации.
animation-fill-mode: устанавливает значение, которое устанавливается до начала или после окончания анимации. Например, можно указать, что после завершения всех циклов анимации фон элемента будет зеленый.
animation-play-state: проигрывает/ставит на паузу анимацию

Свойства анимации указываются таким образом:

Все эти свойства можно записать и одной строкой:

Свойства анимации могут принимать значения, указанные в таблице:

Правило keyframes может иметь неограниченное количество шагов. Не обязательно только начало и конец. Можно указать значения и для середины цикла анимации:

@keyframes changeColor < 0% < background-color: red; >50% < background-color: yellow; >100% < background-color: blue; >>

HTML элементу можно одновременно присвоить несколько анимаций. Давайте добавим нашему элементу анимацию move, которая будет двигать элемент влево и вправо.

Добавим новый блок keyframes

Перечислим анимации через запятую

animation: changeColor 3s infinite, move 4s infinite alternate;

Как видите, мы присвоили одному элементу одновременно 2 анимации: движение и смену цветов.

Практические примеры

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

Анимация спиннера загрузки

Очень часто можно увидеть во время загрузки контента вращающийся спиннер. Давайте создадим такой спиннер при помощи CSS анимации.

В этом примере мы использовали анимацию rotate, где зациклили вращение спиннера на 360 градусов.

Далее мы использовали эту анимацию в списке стилей для элемента:

animation: rotate 1.5s infinite linear

Анимированная форма авторизации

Давайте создадим что-то посложнее. Например анимированную форму авторизации.

Сделаем зацикленную анимацию для кнопки Submit. Добавим анимированный эффект для наведения курсора на кнопку. Сделаем так же анимацию для лейблов Username и Password в момент, когда поля ввода в фокусе.

 Login Username
 Password
 Submit

Обратите внимание на несколько span в кнопке Submit. Именно их мы потом и будем анимировать.

Добавим статические стили в CSS, чтобы наша форма выглядела красиво:

html < height: 100%; >body < margin:0; padding:0; font-family: sans-serif; background: linear-gradient(#141e30, #243b55); >.login-box < position: absolute; top: 50%; left: 50%; width: 400px; padding: 40px; transform: translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; >.login-box h2 < margin: 0 0 30px; padding: 0; color: #fff; text-align: center; >.login-box .user-box < position: relative; >.login-box .user-box input < width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; >.login-box .user-box label < position: absolute; top:0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; >.login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~ label < top: -20px; left: 0; color: #03e9f4; font-size: 12px; >.login-box form a < position: relative; display: inline-block; padding: 10px 20px; color: #03e9f4; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing: 4px >.login-box a:hover

Теперь добавим анимации. Анимировать мы будем элементы в кнопке Submit.

Добавим 4 блока keyframes с правилами анимации:

@keyframes btn-anim1 < 0% < left: -100%; >50%,100% < left: 100%; >> @keyframes btn-anim2 < 0% < top: -100%; >50%,100% < top: 100%; >> @keyframes btn-anim3 < 0% < right: -100%; >50%,100% < right: 100%; >> @keyframes btn-anim4 < 0% < bottom: -100%; >50%,100% < bottom: 100%; >>

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

Добавим теперь эту анимацию каждому элементу:

.login-box a span:nth-child(1) < animation: btn-anim1 1s linear infinite; >.login-box a span:nth-child(2) < animation: btn-anim2 1s linear infinite; animation-delay: .25s >.login-box a span:nth-child(3) < animation: btn-anim3 1s linear infinite; animation-delay: .5s >.login-box a span:nth-child(4)

Как видите, мы добились стильной анимации, используя только HTML и CSS.

Заключение

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

Что думаете?

По сути ничего нового , да и чтоб найти хорошую работу не нужно никакого cv , нужно просто быть специалистом и главное иметь желание работать , всё просто Ватсон, да можно найти хорошую работу и без опыта , легко, главное нужно иметь большое желание и немного быть не рукожоп#м ))). Иногда напишут такие требования что сам IT Бог не разберется , а по сути нужен стандартный сисадмин , с универской базой, а понапишут такую ахинею , что никая Википедия таких терминов и знать не знает , кто пишет такие требования idiotusî.))), Хороший айтишник тот который не работает, за него компы пашут и не ломаются, собаки ))). Учись студент

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

Сколько раз еще нужно будет повторить простой чек-лист, чтобы исчезли треш-резюме — риторический вопрос.Впрочем так же как и треш-собеседования 🙂

Источник