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

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

Я хочу, чтобы он был виден в старых браузерах, и я не хочу invlove 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>
12
animation css opacity

4 ответов

просто не устанавливайте начальное 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;
}
27

Я бы предложил вам установить opacity элемента 1 по умолчанию (для браузеров, которые не поддерживают анимацию). Затем запустите анимацию в 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/

1

так как все основные браузеры поддержка CSS3 анимации за исключением 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 classname в определенном селекторе 
.lte-ie9 #element {
   opacity: 1;
   filter : alpha(opacity=100);
}

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

1

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

HTML-код

<div>some text</div>

в CSS

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

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