Search the Community
Showing results for tags 'animation'.
Found 15 results
-
Всем привет! Пытаюсь сделать анимацию так, чтобы второй блок появлялся только после того, как первый полностью уйдёт влево. Ну просто никак, пыталась нагуглить, но получается только одновременное движение двух блоков. Может, кто-то опытный хотя бы намекнёт, что не так в моём коде? https://codepen.io/20ZeteM02/pen/WNwwEEp
-
Подскажите кто сталкивался с анимированием эффекта нажатия через animation? Через transition понятно как, но вот тут http://landing-animation.powercode.pro/ верхние правые кнопки уж очень приятно выглядят, пробовал повторить через инспектор, но безуспешно. Или где-то ошибаюсь или есть какая-то особенность. Спасибо.
-
Подскажите пожалуйста, как сделать паузу мерцания текста, что бы по глазам не било сильно? Посмотреть образец тут. info-box { width : 96%; background : #c2ddf9; border : #CD0000 solid 1px; color : #CD0000; font-weight: 800; line-height : 19px; animation: blur .99s ease-out infinite; text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff; } @keyframes blur { from { text-shadow:0px 0px 5px #fff, 0px 0px 4px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 9px #fff, 0px 0px 9px #fff, 0px 0px 9px #fff, 0px 0px 9px #fff, 0px 0px 9px #CD0000, 0px 0px 9px #CD0000, 0px 10px 12px #4A708B, 0px 10px 12px #4A708B, 0px 10px 12px #4A708B, 0px 10px 12px #4A708B, 0px -10px 12px #4A708B, 0px -10px 11px #4A708B; } } СПАСИБО!
-
Здравствуйте, наткнулся на простую CSS анимацию свойством animation, но что-то она у меня не запускается - просто стоит посередине кнопки и все. Помогите пожалуйста. Пытаюсь скопировать "перелив" с кнопки Смотреть тут http://ma******.ru/ .b-button_animation { animation: 4s ease 0s normal none infinite running flash-button; background-image: -moz-linear-gradient(0px 0 , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0) 50%); background-position: -150px -150px, 0 0; background-size: 250% 450%, 100% 100%; } .b-button_common-black { background: #686868; /* Old browsers */ background: -moz-linear-gradient(top, #686868 0%, #2a2a2c 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #686868 0%,#2a2a2c 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #686868 0%,#2a2a2c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#686868', endColorstr='#2a2a2c',GradientType=0 ); /* IE6-9 */ height: 65px; width: 270px; -webkit-border-radius: 65px; -moz-border-radius: 65px; border-radius: 65px; } .b-button { display: inline-block; vertical-align: middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); text-align: center; } HTML кнопки <div class="b-button b-button_common-black"><a href="#" class="b-button_animation>Нажми меня!</a></div>
-
Доброго всем дня. Нужно сделать так, чтобы на фоне сайта дымился дым (клубился, вращался и.т.д), всегда, а в некоторых блоках дым должен двигаться, сжиматься или расширяться в зависимости от проскроливания страницы. Пожалуйста, подскажите, как это сделать лучше всего? Поставить на фон видео? Но его нельзя будет контролить скролом.
-
Здравствуйте. Как осуществить такую анимацию - https://dribbble.com/shots/1296229-Animation-Rectify-Stats От нее нужен сам круг и цифры в центре, ну и эффект тоже. На SVG? Вдруг у кого-то есть пример, поделитесь, пожалуйста.
-
Всем привет =) Создал тему на киберфоруме. Там уже 2-й день молчат. Решил перебраться сюда. Итак, разрабатываю сайт. Был у меня на этом сайте прелоадер. Обыный, простенький. Просто вешался на весь экран. Когда контент загружался он скрывался с анимацией спада (fade in/out). Собственно код: $('#preloader').delay(350).fadeOut('slow'); Но тут мне рассказали про data атрибуты. Решил попробовать их. Пишу следующее: <body id="main" data-preloader > body#main::before { content: attr(data-preloader); display: block; position: fixed; z-index: 100; top: ; left: ; width: 100vw; height: 100vh; background-color: beige; -webkit-transition: all 0.45s ease-in-out; transition: all 0.45s ease-in-out; } $(document.body).removeAttr('data-preloader'); Прелоадер не скрывается. Просто висит на весь фон. Но я в принципе попробовал сделать и как в статье на htmlbook, (поставить вместо before - after) но результат тот же. Методом тыка я догадался что дело в css. Переписал так: [data-preloader] {...} Вроде заработало. Но нет этого спада. Прелоадер просто, грубо, без анимации исчезает. Я вообще рассчитывал, что он примет во внимание св-во transition, но увы. Как сделать такую анимацию ? Ещё попробовал написать следующее: document.getElementById('main').dataset.preloader.style.display = 'none'; Тогда прелоадер снова не исчезает. Не пойму просто логику. Ошибок в дебагере нету, но он не исчезает. Короче, как сделать такую анимацию через data атрибут?
-
Доброго времени суток, делаю прелоадер для сайта: http://codepen.io/karakym/pen/QNdvBj Есть несколько нюансов которые хотел бы узнать у знатоков. 1. На данный момент анимация простая, поворот нескольких элементов в противоположные стороны, так вот по окончанию загрузки сайта нужно остановить анимацию таким способом, что бы она доехала сначала до конца (все элементы прокрутились в исходные позиции) и лишь только тогда прелоадер можно плавно скрывать. Пробовал animation: paused; но это не совсем то что нужно, ведь анимация остановиться в последнем положении при котором загрузилась страница (то есть не докрутиться до изначального положения. Думал сделать способом убирания Infinite после загрузки страницы отловить когда элементы будут в исходных позициях после чего уже их можно скрывать, но с jQuery я пока что на "ВЫ". 2. С самого начала нужно сделать первую анимацию которая поочередно бы выполнилась для каждого элемента на примере этой анимации, но вот тут появляется новый вопрос по поводу SVG, изначально логотип был создан в CorelDRAW далее я сохраняю его в *.ai формат (Имхо иллюстратор лучше справляется с качеством svg при сохранении), так вот мне никак не удается сделать каждую букву на логотипе отдельным элементом (верней отдельными элементами делаю их в CorelDRAW, вот только когда уже экспортирую код SVG в HTML страницу то там отображается только основные элементы, как бы вывести каждую букву в отдельный path чтоле!? Да бы я смог сделать анимацию для каждой буквы отдельно!?
-
В медиа прописано ограничение на анимацию до ширины 768px В итоге анимация работает только когда проходит ширину 768 Мне при открытии страницы нужна анимация, подскажите что делать?
-
Есть небольшая проблема с анимацией, рассказываю на примере mozilla firefox (т.к. в хроме так в обще не раболает) : При первом наведении курсора на блок фон начинает двигаться, при убирании курсора фон так же плавно смещается обратно ( Это правильно ). Если второй раз навести курсор и через пару секунд убрать курсор с блока анимация фона пропадает и фон быстро прыгает обратно. Подскажите, пожалуйста что я делаю не так, есть ли способ сделать такую анимацию на css? Пример на этой странице
-
Возможно ли сделать две разные анимации (именно animation) для элемента при наведении на него мышью (:hover) средствами CSS? Т.е. навели мышь на элемент сработала первая анимация, убираем мышь срабатывает вторая анимация. P.S. transition не позволяет добиться сложных перемещений блоков, поэтому не подходит
-
1) JavaScript / jQuery, (написание отдельных скпиртов, приложений, фикс багов ) 2) Angular js (написание отдельных скпиртов, приложений, фикс багов ) 3) Верстка , адаптация, фикс багов, psd to html 4) Css анимации, html5 5) twitter bootstrap Интересует удаленная работа по Front-end на part-time (совмещение, 2-3 часа). А также разовая либо стартап. Как найти: 1) skype: pawel_rosolko 2) rsk.pawel@gmail.com
-
Суть вопроса: в HTML страничке реализована анимация средствами CSS: // CSS .fon_animate{ ...width: 0px; animation: timing_left 2s ease forwards;}@keyframes timing_left { 100%{ width: 400px; margin-left: 0px; }}//HTML <div class = "fon_animate" style="top:250px; animation-delay: 1s"> <img src = "../res/img/blank.png"></div>Необходимо по кнопке клавиатуры, например пробел, либо сокращать время анимации до нуля, либо переходить к 100% анимации. Я так понимаю это можно реализовать средствами JQuery. Очень буду рад и благодарен за помощь!
-
Chrome: Анимация срабатывает сразу после загрузки страницы
ExtendedPlay posted a question in HTML Coding
Привет всем. Обнаружил странную особенность Хрома: анимация выполняется сразу после загрузки страницы. Вот, сделал тестовую страничку: http://www.photonoob...sition-bug.html Там всего один div, которому прописана анимация. Проверял на последних версиях Хрома (25.0.1364) на Win7 и MacOSX 10.6.2. (Если у кого-то не срабатывает, то попробуйте, находясь по вышеуказанному адресу, перейти на другую страницу, а затем нажмите кнопку «Назад» чтобы вернуться.) То что это баг я решил потому что такое поведение свойственно только Хрому. В других браузерах такого нет. Более того, даже в Сафари баг не обнаруживается. Вообще, поискав информацию на эту тему, выяснил, что уже существует обход этого бага с помощью JS. Но при этом не существует багрепорта. Вот я думаю, нужно ли создавать багрепорт, либо это всё-таки не баг. -
Помогите разобраться, почему не работает данный код http://jsfiddle.net/npofopr/da88b/ Хотя тут все работает http://codepen.io/fanchou/pen/clufJ На codepin сделано scss, но оно и в css работает, если перевести.
