Code
2024-10-08 06:00:06

加载Css3过渡动画?

是否有可能使用CSS3过渡动画页面加载而不使用Javascript?

这是我想要的，但在页面加载:

image-slider.html

到目前为止我发现了什么

CSS3过渡-延迟，一种延迟元素效果的方法。只适用于悬停。 CSS3关键帧，工作在负载上，但非常慢。正因为如此，它并不有用。 CSS3转换足够快，但页面加载时没有动画效果。

当前回答

你可以在页面加载时运行CSS动画，而不使用任何JavaScript;你只需要使用CSS3关键帧。

让我们看一个例子……

下面是只使用CSS3的导航菜单滑动的演示:

@keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } header { /* This section calls the slideInFromLeft animation we defined above */ animation: 1s ease-out 0s 1 slideInFromLeft; background: #333; padding: 30px; } /* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;} <header> <a href="#">Home</a> <a href="#">About</a> <a href="#">Products</a> <a href="#">Contact</a> </header>

分解一下……

这里重要的部分是关键帧动画，我们称之为slideInFromLeft…

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

.．.这基本上是在说“在开始的时候，标题将会在屏幕的左边边缘处全宽，而在结束的时候会在适当的位置”。

第二部分是调用slideInFromLeft动画:

animation: 1s ease-out 0s 1 slideInFromLeft;

以上是简写版本，为了清晰起见，这里是详细版本:

animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */

你可以做各种有趣的事情，比如滑动内容，或者吸引人们的注意力。

W3C是这么说的。

2012-09-28 10:59:09

其他回答

好吧，我已经成功地实现了一个动画，当页面加载仅使用css过渡(sort of!):

我已经创建了2个css样式表: 第一个是我想要在动画之前的html样式… 第二个是我想要的页面在动画完成后的样子。

我不完全明白我是如何做到这一点，但它只在两个css文件(在我的文档的头部)被一些javascript分开如下。

我已经在Firefox、safari和opera上进行了测试。有时动画工作，有时它直接跳到第二个css文件，有时页面似乎正在加载，但什么也没有显示(也许只是我?)

<link media="screen,projection" type="text/css" href="first-css-file.css"  rel="stylesheet" />

<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>

<script type='text/javascript'>
$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){  // Update class to point at the head of the list
});
}
});
</script>

<link media="screen,projection" type="text/css" href="second-css-file.css"  rel="stylesheet" />

这是我正在进行中的网站的链接:http://www.hankins-design.co.uk/beta2/test/index.html

也许我错了，但我认为不支持css过渡的浏览器应该没有任何问题，因为他们应该直接跳到第二个css文件，没有延迟或持续时间。

我有兴趣知道如何搜索引擎友好的这种方法的看法。带着我的黑帽子，我想我可以用关键字填充一个页面，并对其不透明度应用9999s延迟。

我很想知道搜索引擎是如何处理转换延迟属性的，以及使用上述方法，他们是否甚至可以看到页面上的链接和信息。

更重要的是，我真的想知道为什么这是不一致的每次页面加载，我怎么能纠正这一点!

我希望这能产生一些观点和意见，如果没有别的!

2012-07-18 20:32:29

如果有人同时做两个过渡有问题，这是我做的。我需要文字从上到下的页面加载。

超文本标记语言

<body class="existing-class-name" onload="document.body.classList.add('loaded')">

超文本标记语言

<div class="image-wrapper">
    <img src="db-image.jpg" alt="db-image-name">
    <span class="text-over-image">DB text</span>
</div>

CSS 

.text-over-image {
    position: absolute;
    background-color: rgba(110, 186, 115, 0.8);
    color: #eee;
    left: 0;
    width: 100%;
    padding: 10px;
    opacity: 0;
    bottom: 100%;
    -webkit-transition: opacity 2s, bottom 2s;
    -moz-transition: opacity 2s, bottom 2s;
    -o-transition: opacity 2s, bottom 2s;
    transition: opacity 2s, bottom 2s;
}

body.loaded .text-over-image {
    bottom: 0;
    opacity: 1;
}

不知道为什么我一直试图在1个选择器中使用2个转换声明，(不是真的)认为它会使用两者。

2019-09-23 13:30:30

将此添加到您的CSS淡入动画

body{animation: 2s ease-out 0s 1 FadeIn;}
@keyframes FadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
}

如果你想让它加载得更慢，就增加放松时间

2021-05-28 09:19:46

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

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

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

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

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

2011-07-24 07:42:45

只需要很少的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

推荐文章

aliyun

最新文章

标签

2024 code 京ICP备15047053号-1