Анимация CSS с задержкой и непрозрачностью

Я пытаюсь затухать в элементе через 2 секунды с помощью анимации CSS. Код отлично работает в новых браузерах, но в старых браузерах элемент останется скрытым из-за «непрозрачности: 0».Анимация CSS с задержкой и непрозрачностью

Я хочу, чтобы он был виден в старых браузерах, и я не хочу ссылаться на javascript. Можно ли это решить с помощью CSS? Например. некоторые, как целевые браузеры, которые не поддерживают анимацию?

CSS:

#element{ 
animation:1s ease 2s normal forwards 1 fadein; 
-webkit-animation:1s ease 2s normal forwards 1 fadein; 
opacity:0 
} 

@keyframes fadein{from{opacity:0} 
to{opacity:1} 
} 

@-webkit-keyframes fadein{from{opacity:0} 
to{opacity:1} 
}

HTML:

<div id=element>som content</div>

источник

2015-04-24 user1087110

Только не установлено начальное opacity на самом элементе, установите его в @keyframes:

#element{ 
    -webkit-animation: 3s ease 0s normal forwards 1 fadein; 
    animation: 3s ease 0s normal forwards 1 fadein; 
} 

@keyframes fadein{ 
    0% { opacity:0; } 
    66% { opacity:0; } 
    100% { opacity:1; } 
} 

@-webkit-keyframes fadein{ 
    0% { opacity:0; } 
    66% { opacity:0; } 
    100% { opacity:1; } 
}

Этот метод принимает задержку выключения анимации, так что он начинает работать немедленно. Однако непрозрачность на самом деле не изменится примерно до 66% в анимацию. Поскольку анимация работает в течение 3 секунд, она дает эффект задержки на 2 секунды и исчезает в течение 1 секунды.

Смотрите рабочий пример здесь: https://jsfiddle.net/75mhnaLt/

Вы также можете посмотреть на использование условных комментариев для старых браузеров; IE8 и IE9.

Что-то вроде следующего в вашем HTML:

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-GB"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8 ie-7" lang="en-GB"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9 ie-8" lang="en-GB"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-GB"> <!--<![endif]-->

Вы могли бы сделать что-то вроде:

.lt-ie9 #element { 
    opacity: 1; 
}

источник

2015-04-24 11:48:14

вы можете попробовать это может быть поможет вам.

HTML

<div>some text</div>

CSS

div{ 
-webkit-animation: fadein 5s linear 1 normal forwards; 
} 

@-webkit-keyframes fadein{ 
from{ 
    opacity: 0; 
} 
to{ 
    opacity: 1; 
} 
}

источник

2015-04-24 11:31:51

Поскольку все основные браузеры support CSS3 animations с заметным исключением IE<10 вы могли бы использовать условные комментарии в ваш HTML, как так

<!DOCTYPE html> 
<!--[if lte IE 9]><html class="lte-ie9"><![endif]--> 
<!--[if (gt IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html><!--<![endif]-->

, таким образом, вы можете добавить более конкретные правила для IE<10 используя .lte-ie9 имени класса в определенном селекторе

.lte-ie9 #element { 
    opacity: 1; 
    filter : alpha(opacity=100); 
}

Я бы не двигаться вместо этого opacity: 0 внутри первого ключевого кадра в качестве основного предложения, так как это было бы ограничить все анимации иметь animation-delay равным 0 (или в противном случае вы могли видеть своего рода fouc для самого элемента)

источник

2015-04-24 11:32:45 fcalderan

Я бы предположить, что вы установили opacity элемента 1 в defaul t (для браузеров, которые не поддерживают анимацию). Затем запустите анимацию с 0s и используйте ключевые кадры для задержки анимации.

#element{ 
animation:3s ease 0s normal forwards 1 fadein; 
-webkit-animation:3s ease 0s normal forwards 1 fadein; 
opacity:1 
} 

@keyframes fadein{ 
    0%{opacity:0} 
    80%{opacity:0} 
    100%{opacity:1} 
} 

@-webkit-keyframes fadein{ 
    0%{opacity:0} 
    80%{opacity:0} 
    100%{opacity:1} 
}

http://jsfiddle.net/mg00t86v/2/

источник

2015-04-24 11:35:07

Анимация CSS с задержкой и непрозрачностью

ответ

Смежные вопросы