具有延迟和不透明度的 CSS 动画

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29846224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 03:12:08  来源:igfitidea点击:

CSS animation with delay and opacity

cssanimationopacity

提问by user1087110

I am trying to fade in a element after 2 sec using CSS animation. The code works great in new browsers, but in old browsers the element will stay hidden because of "opacity:0".

我正在尝试使用 CSS 动画在 2 秒后淡入元素。该代码在新浏览器中运行良好,但在旧浏览器中,由于“opacity:0”,该元素将保持隐藏状态。

I want it to be visible in old browsers and I dont want to invlove javascript. Can it be solved using CSS? Eg. some how target browsers that doesn't support animation?

我希望它在旧浏览器中可见,我不想使用 javascript。可以用CSS解决吗?例如。一些如何定位不支持动画的浏览器?

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:

HTML:

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

回答by Michael Giovanni Pumo

Just don't set the initial opacityon the element itself, set it within the @keyframes:

只是不要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; }
}

This technique takes the delay off of the animation, so that it starts running immediately. However, the opacity won't really change until about 66% into the animation. Because the animation runs for 3 seconds, it gives the effect of a delay for 2 seconds and fade in for 1 second.

这种技术消除了动画的延迟,使其立即开始运行。然而,直到动画中的 66% 左右,不透明度才会真正改变。因为动画运行了 3 秒,所以它给出了延迟 2 秒和淡入 1 秒的效果。

See working example here: https://jsfiddle.net/75mhnaLt/

请参阅此处的工作示例:https: //jsfiddle.net/75mhnaLt/

You might also want to look at using conditional comments for older browsers; IE8 and IE9.

您可能还想考虑对旧浏览器使用条件注释;IE8 和 IE9。

Something like the following in your HTML:

在您的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]-->

You could then do something like:

然后,您可以执行以下操作:

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

回答by Raphael Müller

I'd suggest that you set the opacityof the element to 1 per default (for browsers that do not support animations). Then start the animation at 0s and use the keyframes to delay the animation.

我建议您将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/

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

回答by Fabrizio Calderan

Since all the major browsers support CSS3 animationswith the notable exception of IE<10you could use conditional comments into your HTML like so

由于所有主要浏览器都支持 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]-->

thus you can add a more specific rule for IE<10using the .lte-ie9classname in a specific selector

因此,您可以添加更具体的规则以在特定选择器中IE<10使用.lte-ie9类名

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

I would not move instead the opacity: 0inside the first keyframe as a primary suggestion, since this would limit all the animations to have an animation-delayequal to 0(or otherwise you could see a kind of foucfor the element itself)

我不会将opacity: 0第一个关键帧的内部移动作为主要建议,因为这会限制所有动画具有animation-delay等于0(否则您可以看到元素本身的一种fouc

回答by Parth Akbari

you can try this might be help you.

你可以试试这可能对你有帮助。

HTML

HTML

<div>some text</div>

CSS

CSS

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

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

回答by MgSam

I had a similar problem, where the requirement was to wait nseconds before fading in different page elements, one after another.

我有一个类似的问题,要求是n在不同页面元素一个接一个淡入之前等待几秒钟。

The key to getting this working for me, that isn't mentioned in any of the other answers, is the fact that animationcan actually take a list of animations to run. It will start running them simultaneously so you need to insert delays in order to run them sequentially.

使这个对我有用的关键,在任何其他答案中都没有提到,是实际上animation可以运行一系列动画的事实。它将开始同时运行它们,因此您需要插入延迟以便按顺序运行它们。

My solution was this (in SCSS, but simple enough to write as straight CSS if you need):

我的解决方案是这样的(在 SCSS 中,但如果需要,可以简单地编写为直接的 CSS):

@mixin fade-in($waitTime) {
    animation: 
        wait #{$waitTime},
        fade-in 800ms #{$waitTime};
}

@keyframes wait {
    0% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

Usage:

用法:

h1 {
    @include fade-in('500ms');
}
h2 {
    @include fade-in('700ms');
}