Анимация css и свойство @keyframes

Сообщений: 412

Репутация: 524

Сообщение # 1 | 02:10:36 04 Июл 2012

Свойство @keyframes само по себе сейчас негде не хочет у нас работать, но естественно продвинутые люди (Разработчики:Mozilla Firefox и Chromium)Придумали вот что.
@-moz-keyframes - для Mozilla Firefox и всех браузеров на этом же движке.
@-webkit-keyframes - для Chromium и Safari (Не помню как сафари пишется).
Для использования обязательно прописать имя свойства.
Для здания скажем так "откуда до куда" передвижения или чего-то иного. Есть два способа.
Первый это значения from и to от одного "места" к другому. Вот пример.

Code

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

Если вам мало двух значений у вас есть ещё 100. Они записываются в виде процентов от 0% до 100% где соответственно from 0 а to 100.
То есть пример уже такой.

Code

@keyframes mymove
{
0% {top:0px;}
50% {top:200px;}
100% {top:200px;}
}

Мы дали команду не "передвижения" на действие. но ещё не дали команду на стиль!
а стиль прописывается свойствами animation у него есть и свои директивы:animation-name Указывает для анимации имя от @keyframes, animation-duration - Указывает сколько секунд или миллисекунд занимает анимация для завершения одного цикла, animation-timing-function - Указывает характеристическую функцию скорости анимации, animation-delay - Указывает, когда анимация начнется (задержка), animation-iteration-count - Указывает, сколько раз анимация должна быть воспроизведена, animation-direction - Указывает, должна ли анимация воспроизводиться в обратном порядке на чередующихся (четных) циклах воспроизведения, animation-play-state - Указывает состояние анимации: воспроизведение или пауза.
Одного поста и времени мне не хватило на всё . . .остальное описание (Если не удалят) Будет как проснусь biggrin

Пум-пурум-пурум-пум-пум!

Сообщение отредактировал Deadshot - Среда, 04 Июл 2012, 02:12:13

Kelin

Сообщений: 44

Репутация: 58

Сообщение # 2 | 08:51:24 04 Июл 2012

Знаю еще один вариант анимации. Делается это через свойство "transition" Вот пример:

Code

.demo_web41k {transition:all 0,1s ease;-webkit-transition:all 0,1s ease;-moz-transition:all 0,1s ease;-o-transition:all 0,1s ease; -ms-transition:all 0,1s ease; position:absolute; top: 25px;}
.demo_web41k:hover {top:150px;}

Таким образом, при наведении на элемент с классом "demo_web41k" мы получим анимацию. Здесь элемент перенесется вниз на 125px. Также можно делать с шириной, цветом и любыми другими свойствами wink

maxycws

Сообщений: 1

Репутация: 0

Сообщение # 3 | 11:34:34 19 Дек 2014

Сделал перевод статьи по анимациям для начинающих. От и до расписано что для чего. Живые примеры тут же в тексте. Можно копировать и
вставлять сразу к себе на сайт.
http://devdocs.ru/verstka/css3-animations-for-beginners/

Dogica

Сообщений: 1230

Репутация: 353

Уровень замечаний:

Сообщение # 4 | 13:31:37 19 Дек 2014

спасибо ребята
а то флэш и джаваскрипт достали уже порядочно
ни шага без них на большинстве сайтов

WWW.DOGICA.COM / WWW.DOGICA.ORG

Сообщение отредактировал Dogica - Пятница, 19 Дек 2014, 22:10:30

Ferro7

Сообщений: 285

Репутация: 230

Сообщение # 5 | 14:39:39 19 Дек 2014

Цитата

img {
/* Привязка анимации */
-webkit-animation-name: ИМЯ АНИМАЦИИ;
-moz-animation-name: ИМЯ АНИМАЦИИ;
-o-animation-name: ИМЯ АНИМАЦИИ;
animation-name: ИМЯ АНИМАЦИИ;
/* Задержка перед началом */
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
/* Продолжительность анимации */
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}

Но тут надо быть внимательным.

Добавлено (19 Дек 2014, 14:39:39)
---------------------------------------------
Dogica, bounceIn - имя анимации

Вы полюбили меня. Здесь я. (с)

Dogica

Сообщений: 1230

Репутация: 353

Уровень замечаний:

Сообщение # 6 | 18:55:59 29 Дек 2014

Разобрался! Спасибо за помощь
Вот примеры того что хотел сделать...

http://www.dogica.com/welcome

http://www.dogica.com/

============================================

Вот весь набор анимаций с примерами на каждую:

http://daneden.github.io/animate.css/

удачи, друзья!

WWW.DOGICA.COM / WWW.DOGICA.ORG

Сообщение отредактировал Dogica - Понедельник, 29 Дек 2014, 19:03:12

zarim

Сообщений: 489

Репутация: 82

Уровень замечаний:

Сообщение # 7 | 19:20:01 29 Дек 2014

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

Если человек пришол с поисковика по запросу, то есть за инфой, то ему нужен прежде всего сам текст или картинки, а лишние двигающиеся анимашки, ИМХО, очень отвлекают, а с мобильного интернета или с телефона... такая страница будет очень долго грузиться, если вообще загрузится.

Прошу не обижаться, а так - симпатично))))

Dogica

Сообщений: 1230

Репутация: 353

Уровень замечаний:

Сообщение # 8 | 19:25:15 04 Янв 2015

спасибо за конструктивную критику!
сайт не предназначен для просмотра с мобильного интернета и телефона (о чем выдается информативное сообщение при входе с любого мобильного браузера)

Добавлено (04 Янв 2015, 19:25:15)
---------------------------------------------
назрел вопрос после кучи безуспешных попыток cry cry cry
есть вот такая рабочая конструкция:

@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}
.rollIn{animation-name:rollIn}

применяю ее к картинкам с помощью добавления им class="animated rollIn", все пашет..
но как ее применить к вот такой штуке:

<style>
#tooltip {border-radius: 5px;box-shadow: 0 0 1px black;color: white; position: absolute;}
</style>

==============================
Спасибо если кто поможет.. respect

WWW.DOGICA.COM / WWW.DOGICA.ORG

Сообщение отредактировал Dogica - Понедельник, 29 Дек 2014, 20:55:02

Страница 1 из 1 1
Модератор форума: JonMagon