动画停止使用CSS3 [英] Animation stop with css3

问题描述

目前我的工作采用了滑盖动画头（只CSS3）：

At the moment i am working on a header with a slider animation (css3 only):

http://jimmytenbrink.nl/slider/

一切除了有时，如果你从中心向右走滑块窃听工作的罚款。看来，我需要停止动画几毫秒内完成。不过，我找遍了互联网上，但我似乎无法得到它的工作。

Everything is working fine except sometimes the slider is bugging if you go from the center to the right. It seems that i need to stop the animation for a few miliseconds to complete. However i searched everywhere on the internet but i cant seem to get it to work.

在这里的任何人都有一个经验，谁可以帮我吗？

Anyone here has experience with it who can help me out?

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;
}

这里是一个的jsfiddle

所以现在的问题是，我怎么能设置动画停止几毫秒所以它被再次触发前的动画可以完成？

So the question is, how can i set a stop on the animation for a few miliseconds so the animation can finish before it gets triggered again?

希望我的问题是清楚的！

Hope my question is clear!

（感谢编辑）

推荐答案

一个可以称之为我的回答一个的解决方法的。也许是但据我在 ExtPro的回答评论 - 它仍然是完全纯CSS结果。
我决定用显示：表细胞，因为表格单元格的宽度平均分配

One might call my answer a workaround. Maybe it is but according to my comment on ExtPro's answer - it is still completely pure CSS.
I decided to use display: table-cell since the table cell's width is distributed equally.

因此​​，CSS可能是这样的：结果
的提示：这只是一堆必要的CSS。所有code是在的jsfiddle 的

So, the CSS might look like this:
HINT: This is only a bunch of necessary CSS. All the code is in the 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;
}

小提琴

正如你所看到的，我们没有确定所有的宽度的未徘徊的申报单。其实，这个问题从那时候CSS规则传来：

Fiddle

As you can see, we don't have to determine the width of all not-hovered divs. Actually, the problem came from that very CSS rule:

/* DON'T USE THIS RULE - IT'S THE RULE WHICH WAS BAD */
header:hover > div {
    width: 43.8px;
}

您正在改变的div的宽度上头：悬停，所以当转换没能完成其工作的时候，你就出来了鼠标指点到头部，而是非的div的。

You were changing the width of the divs on header:hover, so when the transition didn't manage to do its job in time, you came out with mouse pointing to the header but to non of the divs.

这篇关于动画停止使用CSS3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！