Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
Gerd199
11 / 11 / 3
Регистрация: 06.03.2014
Сообщений: 1,647
1

Анимация

14.02.2020, 19:31. Просмотров 816. Ответов 7
Метки нет (Все метки)

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.msg {
    padding: 10px;
    position: absolute;
    border-radius: 2px 0 2px 2px;
    background: #0000008f;
    color: #fff;
    max-width: 500px;
    right: 15px;
    top: 10px;
    z-index: 51000;
    opacity:0;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 1));
    animation: identifier 4s ease;
}
 
@keyframes identifier {
  10%, 80% {
    opacity: 1;  
  }
  99.99%{
    opacity: 0; 
    pointer-events: auto;
  } 
  100%{
    display:none;
    pointer-events: none;
  }
}
Анимация работает, но. Когда анимация завершена, блок остается на месте по верх других блоков. Например ссылок и закрывает эти самые ссылки. В итоге не удается кликнуть по ним. Выставил display:none; по завершению анимации, не помогает. Как возможно решить?
0
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.02.2020, 19:31
Ответы с готовыми решениями:

Анимация
Всем привет! У меня такой вопрос, я написал такую анимацию: <div id="axis" class='one'> <img...

Анимация
Здравствуйте. Помогите, пожалуйста, сделать такую анимацию. Смог сделать 1 объект, который катается...

Анимация
Добрый вес день! Подскажите пожалуйста, как создать картинку, которая напоминает курицу? Можно ли...

Анимация
Помогите пж, нужно сделать бесконечную анимацию, которая появляется на 3 сек, а потом исчезает на 5...

Анимация
Добрый вечер! Можно активировать css анимацию при ховере, клике и другим событиям, а как сделать...

7
gogolik
ᕕ( ᐛ )ᕗ
610 / 457 / 241
Регистрация: 13.03.2010
Сообщений: 2,001
14.02.2020, 22:29 2
visibility: hidden
0
Gerd199
11 / 11 / 3
Регистрация: 06.03.2014
Сообщений: 1,647
15.02.2020, 00:13  [ТС] 3
Как его присвоить по завершению анимации? Как не пробую не выходит. Нюанс в том, что ссылки возможны внутри блока на котором анимация. Необходимо чтобы ссылки внутри работали и после того как анимацию завершится, ссылки работали под блоком.
0
Alex Web
57 / 35 / 16
Регистрация: 18.06.2016
Сообщений: 160
15.02.2020, 05:54 4
Цитата Сообщение от Gerd199 Посмотреть сообщение
Выставил display:none; по завершению анимации, не помогает. Как возможно решить?
поставь
CSS
1
display:none;
в самом блоке потом анимируй, по окончании анимации он пропадет. В начале анимации поставь
CSS
1
display: block;
0
Gerd199
11 / 11 / 3
Регистрация: 06.03.2014
Сообщений: 1,647
15.02.2020, 06:48  [ТС] 5
Не выходит, совсем не показывается блок
0
Alex Web
57 / 35 / 16
Регистрация: 18.06.2016
Сообщений: 160
15.02.2020, 07:43 6
Цитата Сообщение от Gerd199 Посмотреть сообщение
блок остается на месте по верх других блоков. Например ссылок и закрывает эти самые ссылки.
Попробуй блоку с ссылками задать

CSS
1
2
position: relative;
z-index: 1;
0
Gerd199
11 / 11 / 3
Регистрация: 06.03.2014
Сообщений: 1,647
15.02.2020, 07:59  [ТС] 7
Не выйдет, данный блок вложен в родитель, а родитель имеет фиксированную позицию. Тут либо родитель закроет блок с анимацией. Либо как щас, по окончанию анимации закроет дочерний блок ссылками.
0
novichek_1905
411 / 295 / 130
Регистрация: 16.02.2018
Сообщений: 831
15.02.2020, 14:17 8
Лучший ответ Сообщение было отмечено Gerd199 как решение

Решение

Gerd199, мне кажется я уже помогал вам с этим... могу ошибаться.


animation: identifier 4s ease forwards;


дописываем forwards и будем вам счастье.
1
15.02.2020, 14:17
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.02.2020, 14:17

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Анимация
Как написать анимированную вышку связи , не большую ?

Анимация
Здравствуйте. Помогите пожалуйста. Мне нужно создать страницу с картинкой, которая, при наведении...

Анимация
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> ...


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

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

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