Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
dobryc
0 / 0 / 0
Регистрация: 14.11.2014
Сообщений: 1
1

Управление CSS анимацией HTML+CSS+JS

17.11.2014, 12:07. Просмотров 798. Ответов 1
Метки нет (Все метки)

Суть вопроса: в HTML страничке реализована анимация средствами CSS:

// CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.fon_animate{
   ...
   width: 0px;
   animation: timing_left 2s ease forwards;
}
 
@keyframes timing_left {
   100%{
   width: 400px;
   margin-left: 0px;
}
 
}
//HTML

HTML5
1
2
3
<div class = "fon_animate" style="top:250px; animation-delay: 1s">
   <img src = "../res/img/blank.png">
</div>
Необходимо по кнопке клавиатуры, например пробел, либо сокращать время анимации до нуля, либо переходить к 100% анимации. Очень буду рад и благодарен за помощь!
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
17.11.2014, 12:07
Ответы с готовыми решениями:

Старые добрые HTML и CSS или новые HTML 5 и CSS 3?
Здравствуйте ) Дело собственно вот в чем. Я хочу на лето заняться изучением создания сайтов. ...

Как сделать вот такой макет через html и css (div и css)
Доброго времени суток.Подскажите как сделать по скрину ?* что бы было Лого на весь экран вот тот...

Есть 2 файла html и css как мне сделать чтоб файл css распространялся на одну ячейку а не на все
&lt;table class=&quot;s&quot;&gt; &lt;tr&gt; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot;...

Задание в HTML, CSS и сайт CSS.
Нет возможности скачать учебник по HTML, CSS помогите с заданием! В HTML как сделать вложенные...

Css не работает - HTML, CSS
Не показывает css-код в комментарии GRID из Html-кода PORTFOLIO В html ввожу картинки, все...

1
RedFraction
1 / 1 / 0
Регистрация: 14.04.2014
Сообщений: 39
23.11.2014, 02:19 2
Тут по нажатию на Enter. Просто заменишь кейкод "13", на код пробела.

Javascript
1
2
3
4
5
6
7
document.onkeyup = function (e) {
    e = e || window.event;
    if (e.keyCode === 13) {
        document.getElementById("...").style.animation-delay = 0;
    }
    return false;
}
Добавлено через 9 минут
Цитата Сообщение от RedFraction Посмотреть сообщение
.animation-delay = 0;
исправить на - .style.animationDelay = 0;
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
23.11.2014, 02:19

Создание страницы с css-анимацией и параллаксом
Здравствуйте. Появилась необходимость создать анимированную страницу с эффектами параллакса. С...

Html и css. Можно ли подогнать картинку в html под рамку
Добрый день. У меня такой вопрос. Создал рамку в фотошопе. Можно ли подогнать картинку в html под...

Управление вкладками через CSS
Добрый день, помогите разобраться с отображением вкладок. Есть две вкладки: Вкладка1 и Вкладка2. В...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru