目前我正在制作带有 slider 动画的标题(仅限 css3):
http://jimmytenbrink.nl/slider/
一切工作正常,除了有时从中心向右移动时 slider 会出现故障。看来我需要停止动画几毫秒才能完成。然而,我在互联网上到处搜索,但似乎无法让它工作。
这里有谁有这方面的经验可以帮助我吗?
HTML
<header>
<div><span>slide 1</span></div>
<div><span>slide 2</span></div>
<div><span>slide 3</span></div>
<div><span>slide 4</span></div>
<div><span>slide 5</span></div>
<div><span>slide 6</span></div>
<div><span>slide 7</span></div>
<div><span>slide 8</span></div>
</header>
CSS
header {
margin-top: 10px;
width: 800px;
overflow: hidden;
height: 500px;
}
header div {
background-color: #000;
width: 43.8px;
height: 200px;
position: relative;
float: left;
-webkit-transition: width .3s;
transition: width .3s;
overflow: hidden;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
margin-right: 2px;
}
header div:first-child {
margin-left: 0px;
}
header div:last-child {
margin-right: 0px;
}
header div:hover span {
left: 50px;
opacity: 1;
}
header div img {
position: relative;
left: -240px;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-filter: grayscale(1);
overflow:hidden;
}
header div span {
-webkit-transition: left .3s;
transition: left .3s;
position: absolute;
bottom: 30px;
color: white;
left: -350px;
opacity: 0;
width: 450px;
font-family:'Fugaz One', cursive;
text-transform: uppercase;
font-size: 24px;
color: #fff;
text-shadow: 0px 0px 10px #f1f1f1;
filter: dropshadow(color=#f1f1f1, offx=0, offy=0);
}
header:hover > div {
width: 43.8px;
}
header:hover > div:hover {
width: 150px;
}
所以问题是,如何设置动画停止几毫秒,以便动画可以在再次触发之前完成?
希望我的问题很清楚!
(感谢您的编辑)
最佳答案
有人可能将我的答案称为“解决方法”。也许是,但根据我对 ExtPro's answer 的评论- 它仍然是完全纯CSS。
我决定使用 display: table-cell
因为表格单元格的宽度是均匀分布的。
因此,CSS 可能如下所示:
提示:这只是一堆必要的 CSS。所有代码都在jsFiddle中
header {
width: 368px;
display: table;
overflow: hidden;
}
header > div {
width: 44px;
height: 200px;
position: relative;
-webkit-transition: width .3s;
transition: width .3s;
display: table-cell;
overflow: hidden;
}
header > div:hover {
width: 151px;
}
Fiddle
如您所见,我们不必确定所有未悬停 div 的宽度。实际上,问题就出在 CSS 规则上:
/* DON'T USE THIS RULE - IT'S THE RULE WHICH WAS BAD */
header:hover > div {
width: 43.8px;
}
您正在更改 header:hover
上的 div 宽度,因此当过渡未能及时完成其工作时,您会发现鼠标指向标题,但指向 <强>非 div。
关于css - css3 动画停止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19928711/