Поиск по сайту
Результаты поиска по тегам 'animation'.
Найдено 14 результатов
-
Подскажите кто сталкивался с анимированием эффекта нажатия через 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; } } СПАСИБО!
- 1 ответ
-
- blur
- text-shadow
-
(и ещё 1)
Теги:
-
Здравствуйте, наткнулся на простую 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 не позволяет добиться сложных перемещений блоков, поэтому не подходит
- 5 ответов
-
- :hover
- @keyframes
-
(и ещё 1)
Теги:
-
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) [email protected]
-
- javascript
- angular
- (и ещё 5)
-
Суть вопроса: в 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 добавил вопрос в Проблемы верстки
Привет всем. Обнаружил странную особенность Хрома: анимация выполняется сразу после загрузки страницы. Вот, сделал тестовую страничку: http://www.photonoob...sition-bug.html Там всего один div, которому прописана анимация. Проверял на последних версиях Хрома (25.0.1364) на Win7 и MacOSX 10.6.2. (Если у кого-то не срабатывает, то попробуйте, находясь по вышеуказанному адресу, перейти на другую страницу, а затем нажмите кнопку «Назад» чтобы вернуться.) То что это баг я решил потому что такое поведение свойственно только Хрому. В других браузерах такого нет. Более того, даже в Сафари баг не обнаруживается. Вообще, поискав информацию на эту тему, выяснил, что уже существует обход этого бага с помощью JS. Но при этом не существует багрепорта. Вот я думаю, нужно ли создавать багрепорт, либо это всё-таки не баг.- 1 ответ
-
- Chrome
- Transitions
-
(и ещё 3)
Теги:
-
Помогите разобраться, почему не работает данный код http://jsfiddle.net/npofopr/da88b/ Хотя тут все работает http://codepen.io/fanchou/pen/clufJ На codepin сделано scss, но оно и в css работает, если перевести.