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

Question

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

我希望它在旧浏览器中可见，并且我不想涉及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>

Answer 1

只是不要在元素本身上设置初始

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;
}

Answer 2

我遇到了类似的问题，要求是等待

秒，然后才能一个接一个地淡入不同的页面元素。

让这个为我工作的关键，在任何其他答案中都没有提到，是事实上

animation

实际上可以运行一个动画列表。它将开始同时运行它们，因此您需要插入延迟才能按顺序运行它们。

我的解决方案是这样的（在 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; }
}

用途：

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

Answer 3

我建议您将元素的

opacity

默认设置为 1（对于不支持动画的浏览器）。然后在 0 秒开始动画，并使用关键帧延迟动画。

#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/

Answer 4

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

添加更具体的规则

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

作为主要建议，我不会移动第一个关键帧内的

opacity: 0

，因为这会限制所有动画的

animation-delay

等于

（否则你可能会看到一种 fouc元素本身）

Answer 5

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

HTML

<div>some text</div>

CSS

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

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

Answer 6

等待 3 秒，然后从左侧滑入：

更短：

.myclass {animation: 4s slidein;}

@keyframes slidein {
0% {opacity:0;
    transform: translateX(-100%);}
92% {opacity:0;
    transform: translateX(-100%);}
100% {opacity:1;
    transform: translateX 0;}
}

Answer 7

最干净的方法是使用

animation-delay

css 属性来延迟：

.delayed-fadeout {
  animation: 1s forwards fadeout;
  animation-delay: 2s;
}
@keyframes fadeout {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

注意 –

animation-delay

应该在

animation

之后，因为动画速记会覆盖它。

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

问题描述投票：0回答：7

7个回答

最新问题

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

问题描述 投票：0回答：7

7个回答

最新问题

问题描述投票：0回答：7