相关疑难解决方法(0)

如何控制引导旋转木马滑入物品的速度?

我看到你可以设置间隔,但我想控制项目滑动的速度有多快?

   // Sets interval...what is transition slide speed?
    $('#mainCarousel').carousel({
    interval: 3000
});
Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap

75
推荐指数
8
解决办法
24万
查看次数

如何跨多个元素同步CSS动画?

我在页面上有两个元素,我想通过CSS制作动画(特别是-webkit-animation).动画本身只是上下弹跳一个元素.一个元素总是显示和弹跳,另一个元素在鼠标悬停(悬停)之前不会动画.

我的问题是:无论何时启动第二个元素的动画,是否可以同步(两个元素同时达到它们的顶点等)动画跨两个元素?

这是我的HTML:

<div id="bouncy01">Drip</div>
<div id="bouncy02">droP</div>
Run Code Online (Sandbox Code Playgroud)

和我的CSS:

@-webkit-keyframes bounce {
    0% {-webkit-transform: translateY(0px);}
    25% {-webkit-transform: translateY(-2px);}
    50% {-webkit-transform: translateY(-4px);}
    75% {-webkit-transform: translateY(-2px);}
    100% {-webkit-transform: translateY(0px);}
}
#bouncy01,
#bouncy02 {
    margin:10px;
    float: left;
    background: #ff0000;
    padding: 10px;
    border: 1px solid #777;
}
#bouncy01 {
    -webkit-animation:bounce 0.25s ease-in-out infinite alternate;
}
#bouncy02 {
    background: #ffff00;
}
#bouncy02:hover {
    -webkit-animation:bounce 0.25s ease-in-out infinite alternate;
}
Run Code Online (Sandbox Code Playgroud)

最后,该问题的工作演示:http://jsfiddle.net/7ZLmq/2/

(看到问题,鼠标悬停在黄色块上)

animation webkit css3

24
推荐指数
3
解决办法
2万
查看次数

标签 统计

animation ×1

css3 ×1

twitter-bootstrap ×1

webkit ×1