加载Css3过渡动画?

更简单的解决方案(仍然使用[一行内联]javascript):

使用这个作为正文标签: 注意这个主体。或者这个。对我没用。只有长久;querySelector允许使用classList。remove (Linux Chromium)

<body class="onload" onload="document.querySelector('body').classList.remove('onload')">

并将这一行添加到其他CSS规则之上。

body.onload *{ transform: none !important; }

请注意，这可以应用于不透明度(正如OP[其他海报]所要求的那样)，只需使用不透明度作为过渡触发器即可。(甚至可以工作在任何其他CSS规则以相同的方式，你可以使用多个类之间的触发显式延迟)

逻辑是一样的。强制不转换(with:none !importanton body的所有子元素。Onloadand一旦文档被加载，删除类以触发css中指定的所有元素上的所有转换。

下面是第一个答案(见上面的简短回答)

这里有一个相反的解决方案:

制作你的html布局，并根据你的最终结果设置css(与所有你想要的转换)。根据您的喜好设置转换属性添加一个类(例如:waitload)到你想在加载后转换的元素。CSS关键字!important是这里的关键字。一旦文档被加载，使用JS从元素中删除类以开始转换(并删除转换:none override)。

在多个元素上使用多重转换。没有尝试跨浏览器兼容性。

div { width: fit-content; } #rotated { transform: rotate(-50deg)/* any other transformation */ ; transition: 6s; } #translated { transform: translate(90px)/* any other transformation */ ; transition: 6s; } .waitload { transform: none !important; } <div id='rotated' class='waitload'> rotate after load </div> <div id='translated' class='waitload'> trasnlate after load </div> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', init); function init() { [...document.querySelectorAll('.waitload')] .map(e => e.classList.remove('waitload')); } </script>

2020-05-18 04:01:36

只需要很少的Javascript:

window.onload = function() {
    document.body.className += " loaded";
}

现在来看CSS:

.fadein {
    opacity: 0;
    -moz-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    transition: opacity 1.5s;
}

body.loaded .fadein {
    opacity: 1;
}

我知道这个问题说的是“不使用Javascript”，但我认为值得指出的是，有一个简单的解决方案，只需要一行Javascript。

它甚至可以是内联Javascript，就像这样:

<body onload="document.body.className += ' loaded';" class="fadein">

这就是所有需要的JavaScript。

2013-07-07 00:49:41

它将在鼠标第一次在屏幕上移动时开始，这主要是在到达后的一秒钟内，这里的问题是它将在离开屏幕时反转。

html:hover #animateelementid, body:hover #animateelementid {rotate ....}

这是我能想到的最好的东西:http://jsfiddle.net/faVLX/

全屏:http://jsfiddle.net/faVLX/embedded/result/

编辑见下面的评论: 这在任何触屏设备上都行不通，因为没有悬停，所以用户只有点击才会看到内容。——里奇·布拉德肖

2011-07-24 07:42:45

CSS只有延迟3s

这里有几点需要注意:

一次调用多个动画我们创建一个等待动画，它只是延迟实际的动画(在我们的例子中是第二个动画)。

代码:

header {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

2019-10-24 16:06:13

更简单的解决方案(仍然使用[一行内联]javascript):

使用这个作为正文标签: 注意这个主体。或者这个。对我没用。只有长久;querySelector允许使用classList。remove (Linux Chromium)

<body class="onload" onload="document.querySelector('body').classList.remove('onload')">

并将这一行添加到其他CSS规则之上。

body.onload *{ transform: none !important; }

请注意，这可以应用于不透明度(正如OP[其他海报]所要求的那样)，只需使用不透明度作为过渡触发器即可。(甚至可以工作在任何其他CSS规则以相同的方式，你可以使用多个类之间的触发显式延迟)

逻辑是一样的。强制不转换(with:none !importanton body的所有子元素。Onloadand一旦文档被加载，删除类以触发css中指定的所有元素上的所有转换。

下面是第一个答案(见上面的简短回答)

这里有一个相反的解决方案:

制作你的html布局，并根据你的最终结果设置css(与所有你想要的转换)。根据您的喜好设置转换属性添加一个类(例如:waitload)到你想在加载后转换的元素。CSS关键字!important是这里的关键字。一旦文档被加载，使用JS从元素中删除类以开始转换(并删除转换:none override)。

在多个元素上使用多重转换。没有尝试跨浏览器兼容性。

div { width: fit-content; } #rotated { transform: rotate(-50deg)/* any other transformation */ ; transition: 6s; } #translated { transform: translate(90px)/* any other transformation */ ; transition: 6s; } .waitload { transform: none !important; } <div id='rotated' class='waitload'> rotate after load </div> <div id='translated' class='waitload'> trasnlate after load </div> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', init); function init() { [...document.querySelectorAll('.waitload')] .map(e => e.classList.remove('waitload')); } </script>

2020-05-18 04:01:36

我想我已经找到了一种解决OP问题的方法，而不是一开始就过渡。load'的页面-我发现使用一个动画的不透明度淡入有同样的效果，(我正在寻找与OP相同的东西)。

所以我想让正文从白色(与网站背景相同)渐隐到页面加载的黑色文本颜色-我只从周一开始编码，所以我正在寻找一个'上。load'风格的东西代码，但不知道JS -所以这是我的代码，为我工作得很好。

#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

不管出于什么原因，这只对.class的#id不起作用(至少对我的不起作用)

希望这有助于-我知道这个网站帮助我很多!

2016-02-19 14:17:35

加载Css3过渡动画?

推荐文章

最新文章

标签