影响 div 的 CSS 动画伪元素答案

【问题标题】：css animating pseudo elements affecting divs影响 div 的 CSS 动画伪元素
【发布时间】：2014-11-11 00:27:03
【问题描述】：

所以我正在尝试制作一个图像滑块，除了我使用 :before 作为动画进度条和 :after 作为播放/暂停图标之外，一切正常。整个事情是要在 :hover 上暂停，但问题是 .slider :before 和 "after 不要让 .image-container 在 :hover 上暂停，所以一切都会不同步。有人可以帮我吗

附言我尝试制作 .image-container 的前后子代，但随后它们被动画移出框架

body{
    margin:0;
    padding:0;
}
.slider{
    padding:0;
    width:1280px;
    height:720px;
    position:relative;
    overflow:hidden;
    background:green;
}
.image-container{
    width:500%;
    position:relative;
    -webkit-animation: slide 20s ease-out 0 infinite normal;
    animation: slide 20s ease-out 0 infinite mormal;
}
div.image-container img{ 
    float:left;
    width:20%;
    height:auto;
}
div.slider:after{
    content:"";
    width:0;
    height:0;
    position:relative;
    float:left;
    top:-688px;
    left:32px;
    background:rgba(0,0,0,0);
    border-top:24px solid transparent;
    border-left:48px solid rgba(255,255,255,.1);
    border-bottom:24px solid transparent;
    transition:all .3s;
}
div.slider:before{
    content:"";
    width:0;
    height:0px;
    z-index:1;
    position:absolute;
    float:left;
    top:700px;
    border-top:20px double rgba(255,255,255,.1);
    background:rgba(255,255,255,.1);
    -webkit-animation: progress 5s ease-out -2s infinite;
    animation: progress 5s ease-out -2s infinite;
}
div.slider:hover:before{
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
div.slider:hover:after{
    width:16px;
    height:48px;
    border-left:48px double rgba(255,255,255,.1);
    border-top:0 solid transparent;
    border-bottom:0 solid transparent;
}
div.image-container:hover{
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
@-webkit-keyframes slide{
    0%   {right:0%;}
    10%   {right:0%;}
    15%   {right:100%;}
    35%   {right:100%;}
    40%   {right:200%;}
    60%   {right:200%;}
    65%   {right:300%;}
    85%   {right:300%;}
    90%   {right:400%;}
    100%  {right:400%;}
}
@keyframes slide{
    0%   {right:0%;}
    10%   {right:0%;}
    15%   {right:100%;}
    35%   {right:100%;}
    40%   {right:200%;}
    60%   {right:200%;}
    65%   {right:300%;}
    85%   {right:300%;}
    90%   {right:400%;}
    100%  {right:400%;}
}
@-webkit-keyframes progress{
    0%   {width:0px;}
    80%  {width:1280px;}
    100%  {width:0px;}
}
@keyframes progress{
    0%   {width:0px;}
    80%  {width:1280px;}
    100%  {width:0px;}
}

<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="slider">
    <div class="image-container">
        <img src="1.jpg">
        <img src="2.jpg">
        <img src="3.jpg">
        <img src="4.jpg">       
        <img src="1.jpg">
    </div>
</div>

</body>
</html>

也许有这样的事情？

div.slider:before:hover .image-container{
    -webkit-animation-play-state: paused;
    animation-play-state: paused;

【问题讨论】：

div.slider:hover:before 同时使用两个伪元素会造成混乱。所以，请决定在悬停时使用什么，然后编写你的 CSS。
所以我不能做这样的事情吗？ div.slider:before:hover .image-container{ -webkit-animation-play-state: paused;动画播放状态：暂停； }
哦，好吧，现在我明白你的意思了，我用这个修复了它 - div.slider:hover div.image-container{ -webkit-animation-play-state: paused;动画播放状态：暂停； }
你的固定代码有效吗？
是的，原来没有必要使用 :before，感谢您的帮助

标签： html css animation

【解决方案1】：

在您的 CSS 中：

div.slider:hover:before

这是使用伪元素的错误方式。您一次使用了两个伪元素。这会造成混乱。

所以，请决定使用哪个伪元素 while，然后您可以使用所需的 CSS 样式设置页面样式。

【讨论】：