Сейчас мы рассмотрим два варианта их создания.
Анимации эти могут запускаться как по событиям, так и просто при загрузке страницы.
Простая ситуация: какое-то визуальное изменение объекта при наведении на него курсором.
Рассмотрим на примере аватарки пользователя, которая настроена как круглая:
.p-profiles .profile-head .c-brief .avatar>img {
border-radius: 50%;
}.p-profiles .profile-head .c-brief .avatar>img:hover {
border-radius: 0;
}Добавить его поможет свойство transition.
Допустим, что нам нужно просто плавно в течении одной секунды поменять состояние:
.p-profiles .profile-head .c-brief .avatar>img {
border-radius: 50%;
transition: 1s;
}
.p-profiles .profile-head .c-brief .avatar>img:hover {
border-radius: 0;
}Готово, вы восхитительны!
Но что делать, если нам нужна постоянная и, возможно, нетривиальная анимация?
Тут то и начинается самое интересное: написание анимаций по ключевым кадрам.
Рассмотрим на примере всё той же аватарки и популярной сейчас штуки с покачиванием её вверх-вниз.
Сначала в директиве keyframes указываются название будущей анимации. Делается это таким образом:
@keyframes name {
from {/*начало анимации*/
/*изменяемое свойство*/
}
50% { /*какой-то промежуточный этап*/
/*изменяемое свойство*/
}
to {/*конец анимации*/
/*изменяемое свойство*/
}
}Промежуточных этапов может быть сколько душе угодно и в любом месте, не обязательно 50%. Проценты в данном случае - это прогресс выполнения, то есть 50% - это середина, 33.3333% - треть и т.п.
И вот нам, например, надо чтобы аватарка приподнималась вверх на, скажем, 10 пикселей, а потом опускалась обратно. Тут нам поможет свойство transform
@keyframes flyingavatar {
from {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
to {
transform: translateY(0px);
}
}Окей, мы прописали ключевые кадр, что теперь с этим делать?
Теперь надо вызвать эту анимацию на нужном объекте свойством animation.
Допустим нам нужен период в 4 секунды, ну и бесконечность, конечно же.
.p-profiles .profile-head .c-brief .avatar>img {
animation: flyingavatar 4s infinite;
}Надо это исправить значением animation-timing-function.
Сделаем так, чтобы анимация боле плавно ускорялась в начале кадра и замедлялась в конце.
.p-profiles .profile-head .c-brief .avatar>img {
animation: flyingavatar 4s ease-in-out infinite;
}Почитай подробнее о свойствах по ссылкам, не стесняйся пробовать другие. В keyframes можно прописывать практически всё, что принимает числовые значения. Упомянутые приёмы можно совмещать, например добавлять свойство animation к правилу с псевдоклассом :hover.
Удачи в творчестве!
@grin3671@Лягуха, к списку селекторов ты добавляешь свойствоanimationо значениемназвание-анимации, а в@keyframesуказываешьназвание-анимации, а не список селекторов.Перечитай заново статью. Перейди по свойствам-ссылкам, узнай о синтаксисе поподробнее, если так не понятно.
Кроме того, в
scale()указывают числа:1.10или0.5и т.п.@Лягуха@grin3671, о, спасибо@KIONIS,@KIONIS@Гуманоидный Тайфун, если хочешь чтобы аватарка была квадратная, просто напиши: border-radius: 0;чтобы были измененя при наведении например поставь псевдокласс :hover{} и внутри кавычек напиши что хочешь, например чтобы аватарка становилась круглой, :hover{border-radius:50%;}
@Mirisuma Northy@Гуманоидный Тайфун, просто чтобы сделать аватарку квадратной напиши:.p-profiles .profile-head .c-brief .avatar>img {
border-radius: 0;
}
@🦋𝒷.𝓊.𝓉.𝓉.ℯ.𝓇.𝒻.𝓁.𝓎🦋@KIONIS, подскажите как сделать аватарку по центру ?@KIONIS, у меня видимо руки из одного места, ибо с аватаркой ничего не происходит@quee@animestree,вот код для плавающей аватарки:
.p-profiles .profile-head .c-brief .avatar img {
animation: fly 3s ease-in-out infinite;
}
@keyframes fly {
0% {
transform: translateY(0);
}
50% {
transform: translateY(12px);
}
}
@🇷Ϻ🇩,@grin3671Ну или, если не прокатит - погугли, что-нить на подобии: отображение картинки за рамками элемента css
@EngiNier@KisasPisas,@Жанетка Не скажу, жиза. Со мной так и стало, ну только скорее шики дизайнил от того что от белого глаза на лоб вылазили. Но шики это офигенная площадка для экспериментов с стилями.@Жанетка Не скажу@EngiNier, да++ такая же история про белое оформление) я когда открыла, первая мысль это никуда не годится. тогда еще аниме можно было прям в шики смотреть) до слез, хорошие времена были.@EngiNier@Жанетка Не скажу, Я из-за того что аниме тут смотрел поэтому и сидел. Так четко отдизайнил плеер, эээх. Было здорово...С уходом плеера почти и сам исчез)
@Жанетка Не скажу@EngiNier, а я смотрю через браузер встроенный шики.