|
|
Модератор форума: JonMagon |
Сообщество uCoz Вебмастеру JavaScript, Flash и прочие технологии Анимация css и свойство @keyframes (Решил тут написать о анимеции при помощи css.) |
Анимация css и свойство @keyframes |
Свойство @keyframes само по себе сейчас негде не хочет у нас работать, но естественно продвинутые люди (Разработчики:Mozilla Firefox и Chromium)Придумали вот что.
@-moz-keyframes - для Mozilla Firefox и всех браузеров на этом же движке. @-webkit-keyframes - для Chromium и Safari (Не помню как сафари пишется). Для использования обязательно прописать имя свойства. Для здания скажем так "откуда до куда" передвижения или чего-то иного. Есть два способа. Первый это значения from и to от одного "места" к другому. Вот пример. Code @keyframes mymove { from {top:0px;} to {top:200px;} } То есть пример уже такой. 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 - Указывает состояние анимации: воспроизведение или пауза. Одного поста и времени мне не хватило на всё . . .остальное описание (Если не удалят) Будет как проснусь Пум-пурум-пурум-пум-пум!
Сообщение отредактировал Deadshot - Среда, 04 Июл 2012, 02:12:13
|
Знаю еще один вариант анимации. Делается это через свойство "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. Также можно делать с шириной, цветом и любыми другими свойствами |
Цитата 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) Вы полюбили меня. Здесь я. (с)
|
Разобрался! Спасибо за помощь
Вот примеры того что хотел сделать... http://www.dogica.com/welcome http://www.dogica.com/ ============================================ Вот весь набор анимаций с примерами на каждую: http://daneden.github.io/animate.css/ удачи, друзья! Сообщение отредактировал Dogica - Понедельник, 29 Дек 2014, 19:03:12
|
Dogica, посмотрел ваши примеры, по ссылкам, красиво, но не перебор ли? Сам люблю анимашки, но когда открылась страница на которой все движется, мигает и прыгает - в глазах маленько зарябило и захотелось закрыть.
Если человек пришол с поисковика по запросу, то есть за инфой, то ему нужен прежде всего сам текст или картинки, а лишние двигающиеся анимашки, ИМХО, очень отвлекают, а с мобильного интернета или с телефона... такая страница будет очень долго грузиться, если вообще загрузится. Прошу не обижаться, а так - симпатично)))) |
спасибо за конструктивную критику!
сайт не предназначен для просмотра с мобильного интернета и телефона (о чем выдается информативное сообщение при входе с любого мобильного браузера) Добавлено (04 Янв 2015, 19:25:15) Сообщение отредактировал Dogica - Понедельник, 29 Дек 2014, 20:55:02
|
| |||
| |||