通过CSS实现的不同动画

我的HTML页面中只有几个元素，它们只是图像和工具提示。我希望他们根据我在CSS部分完成的动画随机进行动画制作。通过CSS实现的不同动画

目前所有的元素将在页面加载时一起动画，我不想这样做。

我想从jQuery中逐一调用CSS类，但看看元素的数量，因为它只是一个基本的翻译动画，有没有更好的方法来做到这一点？

这里是要素：

<div class="twitter-animate"> 
    <div id="twitter-wrap"><a href="#" id="twitter"><img src="img/link-twitter.png"></a></div> 
    <div id="twitter-tooltip"><span>Tweet!</span></div> 
</div> 


    <div id="youtube-wrap"><a href="#" id="youtube"><img src="img/link-youtube.png"></a></div> 
    <div id="youtube-tooltip"><span>YouTube</span></div> 

    <div id="facebook-wrap"><a href="#" id="facebook"><img src="img/link-fb.png"></a></div> 
    <div id="facebook-tooltip"><span>Facebook</span></div> 

    <div id="newspaper-wrap"><a href="#" id="newspaper"><img src="img/link-newspaper.png"></a></div> 
    <div id="newspaper-tooltip"><span>Newspaper</span></div> 

    <div id="www-wrap"><a href="#" id="www"><img src="img/link-www.png"></a></div> 
    <div id="www-tooltip"><span>Put your URL!</span></div> 

    <div id="email-wrap"><a href="#" id="email"><img src="img/link-email.png"></a></div> 
    <div id="email-tooltip"><span>Mail me!</span></div>

来源

2012-08-07 ocinisme

你能解释一下你的动画是如何完成的吗？ – Gnijuohz 2012-08-07 01:51:50

你能提供一个jsFiddle：http://jsfiddle.net/显示你正在做什么> – 2012-08-07 01:55:32

该图像是非常复杂的上传。其基本思想是这样的，它是一个机器人，身体的某些部分是动画的（比如说只有手，头部或佳能手臂），其余部分则被设置为背景。所以我希望每个部分在彼此完成动画之后进行动画制作。 – ocinisme 2012-08-07 02:19:42

为了简单起见，我假设您希望将元素从左向右翻译。工具提示也是不相关的，所以我会删除它们。

您需要做的第一件事是为您的所有元素添加一个通用类。在这里，我加入share为一类：

<div id="twitter-wrap" class="share"><a href="#" id="twitter">Twitter</a></div> 
<div id="youtube-wrap" class="share"><a href="#" id="youtube">YouTube</a></div> 
<div id="facebook-wrap" class="share"><a href="#" id="facebook">Facebook</a></div> 
<div id="newspaper-wrap" class="share"><a href="#" id="newspaper">Newspaper</a></div> 
<div id="www-wrap" class="share"><a href="#" id="www">WWW</a></div> 
<div id="email-wrap" class="share"><a href="#" id="email">Email</a></div>

然后你的CSS应该是这个样子......

.share { 
    width: 100px; 
    background-color: #333; 
    padding: 3px 0 3px 10px; 
    margin-bottom: 3px; 
    -webkit-transform: translate(-100px, 0); 
    -moz-transform: translate(-100px, 0); 
    -o-transform: translate(-100px, 0); 
    -ms-transform: translate(-100px, 0); 
    transform: translate(-100px, 0); 
    -webkit-transition: all 500ms ease; 
    -moz-transition: all 500ms ease; 
    -o-transition: all 500ms ease; 
    -ms-transition: all 500ms ease; 
    transition: all 500ms ease;  
} 

.share.animate { 
    -webkit-transform: translate(0, 0); 
    -moz-transform: translate(0, 0); 
    -o-transform: translate(0, 0); 
    -ms-transform: translate(0, 0); 
    transform: translate(0, 0); 
}

然后你需要的JavaScript的一点点火过第一动画，后来听当每个变迁理论的结束仍然发射下一个...

//after document ready 
$(".share").first().addClass("animate") 

$(".share").bind("webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend", function(e){ 
    $(e.target).next('.share').addClass("animate"); 
})

你可以找到它都在这里汇集：http://jsfiddle.net/HYAWj/

来源

2012-08-07 02:57:04 Duopixel

感谢您的帮助，我现在更好地理解如何做到这一点。但对于我的情况来说，存在一个小问题，因为动画并不是朝向相同的方向，有些从右侧出现，而另一些从左侧出现。 – ocinisme 2012-08-07 03:19:24

如果你不想让他们所有的动画在一起，而是经过一定的时间间隔，然后使用：

setTimeout(function() { 
    //Put in animation here 
}, 2500);

，其中2500是在时间在setTimeout内的代码运行之前，延迟ms。

来源

2012-08-07 01:45:50 karancan

对不起，但动画是在CSS内完成的，我该如何应用此方法？由于每个ID都有自己的造型和动画。 – ocinisme 2012-08-07 01:49:37

如果您必须使用CSS来执行动画，请向您的元素添加一个类并将该动画放入该类中。 $（“element”）。addClass（“myClass”）; 在setTimeout中添加此行 – karancan 2012-08-07 01:53:09

好的，对于当前的开发状态，我对**＃twitter **，**＃twitter-wrap **，** twitter-tooltip **和** twitter-工具提示范围** 如果我添加上面的类，如何应用这个概念？ – ocinisme 2012-08-07 02:24:42

通过CSS实现的不同动画

回答

相关问题