- Курс-практикум «Педагогический драйв: от выгорания к горению»
- «Формирование основ финансовой грамотности дошкольников в соответствии с ФГОС ДО»
- «Патриотическое воспитание в детском саду»
- «Федеральная образовательная программа начального общего образования»
- «Труд (технология): специфика предмета в условиях реализации ФГОС НОО»
- «ФАООП УО, ФАОП НОО и ФАОП ООО для обучающихся с ОВЗ: специфика организации образовательного процесса по ФГОС»
Свидетельство о регистрации
СМИ: ЭЛ № ФС 77-58841
от 28.07.2014
- Бесплатное свидетельство – подтверждайте авторство без лишних затрат.
- Доверие профессионалов – нас выбирают тысячи педагогов и экспертов.
- Подходит для аттестации – дополнительные баллы и документальное подтверждение вашей работы.
в СМИ
профессиональную
деятельность
Конспект по теме «Разработка анимации с помощью CSS»
592
0
Руденко Наталья Александровна
ГБПОУ ДПК, г.Дзержинск Нижегородской области
преподаватель
Что такое анимация CSS?
Анимация позволяет элементу постепенно переходить от одного стиля к другому.
Вы можете изменить любое количество свойств CSS, сколько угодно раз.
Чтобы использовать анимацию CSS, необходимо сначала указать некоторые ключевые кадры для анимации.
Ключевые кадры держат какие стили элемент будет иметь в определенное время.
Правило @keyframes
При указании стилей CSS внутри @keyframes правило, анимация будет постепенно меняться от текущего стиля к новому стилю в определенное время.
Чтобы получить анимацию для работы, необходимо привязать анимацию к элементу.
В следующем примере анимация "example" привязывается к элементу <div>. Анимация будет длиться 4 секунды, и она будет постепенно менять цвет фона элемента <div> от "Red" на "желтый":
Пример
HTML-код:
<!DOCTYPE html>
<html>
<head>
<title>Анимация</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div></div>
</body>
</html>
CSS-код:
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Примечание: Свойство animation-duration определяет, сколько времени должно занять анимация для завершения. Если свойство animation-duration не задано, анимация не будет выполняться, так как значение по умолчанию равно 0 секундам.
В приведенном выше примере мы указали, когда стиль изменится с помощью ключевых слов "from" и "to" (который представляет 0% (Start) и 100% (полный)).
Также можно использовать процент. С помощью процента можно добавить любое количество изменений стиля.
В следующ
ем примере изменяется цвет фона элемента < div > при завершении анимации на 25%, завершении 50% и повторном завершении анимации на 100%:
Пример
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
В следующем примере изменяется как цвет фона, так и положение элемента <div> при завершении анимации на 25%, завершении 50% и снова при завершении анимации 100%:
Пример
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Задержка анимации
Свойство animation-delay указывает задержку начала анимации.
Следующий пример имеет задержку в 2 секунды перед началом анимации:
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Отрицательные значения также разрешены. При использовании отрицательных значений анимация запускается, как если бы она уже воспроизводится в течение N секунд.
В следующем примере анимация начнется, как если бы она уже играла в течение 2 секунд:
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
Установить, сколько раз анимация должна выполняться
Свойство animation-iteration-count указывает, сколько раз должна выполняться анимация.
В следующем примере анимация будет выполняться 3 раза, прежде чем она остановится:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
В следующем примере используется значение "Infinite" для того, чтобы анимация продолжалась навсегда:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
Запуск анимации в обратном направлении или альтернативные циклы
Свойство animation-direction указывает, следует ли воспроизвести анимацию вперед, назад или в альтернативных циклах.
Свойство "направление анимации" может иметь следующие значения:
normal - Анимация воспроизводится как обычная (вперед). Это значение по умолчанию
reverse - Анимация воспроизводится в обратном направлении (назад)
alternate - Анимация сначала разыгрывается вперед, затем назад
alternate-reverse - Анимация сначала воспроизводится назад, а затем пересылается
В следующем примере анимация будет запущена в обратном направлении (назад):
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}
В следующем примере используется значение "альтернативный", чтобы сначала запустить анимацию вперед, а затем назад:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
В следующем примере используется значение "альтернативный-обратный" для того, чтобы анимация сначала пробежала назад, а затем пересылает:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
Укажите кривую скорости анимации
Свойство animation-timing-function определяет кривую скорости анимации.
Свойство "анимация-время-функция" может иметь следующие значения:
ease - Указывает анимацию с медленным запуском, а затем быстро, а затем закончить медленно (это по умолчанию)
linear - Задает анимацию с одинаковой скоростью от начала до конца
ease-in - Задает анимацию с медленным запуском
ease-out - Задает анимацию с медленным концом
ease-in-out - Задает анимацию с медленным началом и концом
cubic-bezier(n,n,n,n) - Позволяет определить собственные значения в функции кубической Безье
В следующем примере показаны некоторые из различных кривых скорости, которые могут быть использованы:
Пример
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Задание режима заливки для анимации
Анимация CSS не влияет на элемент до воспроизведения первого ключевого кадра или после воспроизведения последнего ключевого кадра. Свойство "анимация-режим заполнения" может переопределить это поведение.
Свойство animation-fill-mode задает стиль для целевого элемента, если анимация не воспроизводится (до начала, после завершения или и того и другого).
Свойство "анимация-режим заполнения" может иметь следующие значения:
none - Значение по умолчанию. Анимация не будет применять стили к элементу до или после выполнения
forwards - Элемент сохранит значения стиля, заданные последним ключевым кадром (зависит от анимации-направления и анимации-количество итераций)
backwards - Элемент получит значения стиля, заданные первым ключевым кадром (в зависимости от направления анимации), и сохранит это во время анимации-период задержки
both - Анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации в обоих направлениях
Следующий пример позволяет элементу <div> сохранять значения стиля из последнего ключевого кадра при завершении анимации:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
Следующий пример позволяет элементу <div> получить значения стиля, заданные первым ключевым кадром до начала анимации (во время периода задержки анимации):
Пример
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
Следующий пример позволяет элементу <div> получить значения стиля, заданные первым ключевым кадром до начала анимации, и сохранить значения стилей из последнего ключевого кадра при завершении анимации:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
АнимацияСокращенноесвойство
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Такой же эффект анимации, как и выше, можно достичь с помощью сокращенного animation Свойства:
div {
animation: example 5s linear 2s infinite alternate;
}
Свойства анимации CSS
В следующей таблице перечислены правила @keyframes и все свойства анимации CSS:
Свойство | Описание |
@keyframes | Указывает код анимации |
animation | Сокращенное свойство для задания всех свойств анимации |
animation-delay | Указывает задержку начала анимации |
animation-direction | Указывает, следует ли воспроизвести анимацию вперед, назад или в альтернативных циклах |
animation-duration | Указывает, сколько времени должно занять анимация для завершения одного цикла |
animation-fill-mode | Задает стиль элемента, если анимация не воспроизводится (до начала, после завершения или и то, и другое) |
animation-iteration-count | Указывает, сколько раз должна воспроизводиться анимация |
animation-name | Указывает имя анимации @keyframes |
animation-play-state | Указывает, запущена ли анимация или приостановлена |
animation-timing-function | Задает кривую скорости анимации |
Задание 1. Создайте страницу по образцу
CSS –код:
p{ color: grey;}
.normal div{ animation-direction: normal;}
.reverse div{ animation-direction: reverse;}
.alternate div{ animation-direction: alternate;}
.alternate-reverse div{ animation-direction: alternate-reverse;}
p:nth-child(1) strong{ color: crimson;}
div:nth-child(2) div{ background: crimson;}
p:nth-child(3) strong{ color: midnightblue;}
div:nth-child(4) div{ background: midnightblue;}
p:nth-child(5) strong{ color: mediumseagreen;}
div:nth-child(6) div{ background: mediumseagreen;}
p:nth-child(7) strong{ color: goldenrod;}
div:nth-child(8) div{ background: goldenrod;}
div { background: white;
height: 20px; width: 220px;}
div div { animation: swipe 2s linear infinite;
background: crimson;
height: 20px; left: 0;
margin-top: -1rem;
position: relative;
transition: 1s; width: 20px;}
@keyframes swipe { 0% { left: 0;} 100%{ left: 200px;}}
HTML – код:
<p><strong>normal</strong>: 0% --> 100%</p>
<div class="normal">
<div></div>
</div>
<p><strong>reverse</strong>: 100% --> 0%</p>
<div class="reverse">
<div></div>
</div>
<p><strong>alternate</strong>: 0% <--> 100%</p>
<div class="alternate">
<div></div>
</div>
<p><strong>alternate-reverse</strong>: 100% <--> 0%</p>
<div class="alternate-reverse">
<div></div>
</div>
Задание 2. Создайте страницу по образцу
CSS –код:
@
keyframes bouncing{ 0% { bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5);}
100%{ bottom: 50px; box-shadow: 0 50px 50px rgba(0,0,0,0.1);}}
a { animation: bouncing 0.5s cubic-bezier(.1,.25,.1,1) 0s infinite alternate both;
background: lightslategrey;
border-radius: 2px; display: inline-block;
color: white; cursor: pointer;
font-size: 0.75rem; font-weight: 300;
letter-spacing: 0.2em; padding: 1em 2em 1.1em;
position: relative; text-decoration: none;
text-transform: uppercase; vertical-align: top;
margin-top: 50px;}
HTML – код:
<div><a>загрузка</a></div>
Адрес публикации: https://www.prodlenka.org/metodicheskie-razrabotki/472311-konspekt-po-teme-razrabotka-animacii-s-pomosc
БЕСПЛАТНО!
Для скачивания материалов с сайта необходимо авторизоваться на сайте (войти под своим логином и паролем)
Если Вы не регистрировались ранее, Вы можете зарегистрироваться.
После авторизации/регистрации на сайте Вы сможете скачивать необходимый в работе материал.
- «Организация лагеря с дневным пребыванием детей на базе образовательного учреждения»
- «Организация работы с одаренными детьми»
- «Педагогическое воздействие: техники и приёмы управления деятельностью обучающихся на уроке»
- «Образование детей с инвалидностью»
- «Обработка документов в образовательной организации»
- «Духовно-нравственное воспитание детей в условиях реализации ФГОС ДО»
- Управленческая деятельность в организации дополнительного образования детей
- Педагогика и методика преподавания химии
- Ведение педагогической деятельности в образовательной организации
- Деятельность учителя-методиста в рамках сопровождения реализации общеобразовательных программ
- Психология и педагогика дошкольного образования
- Педагогика и методика преподавания истории и кубановедения
Чтобы оставлять комментарии, вам необходимо авторизоваться на сайте. Если у вас еще нет учетной записи на нашем сайте, предлагаем зарегистрироваться. Это займет не более 5 минут.