动画CSS列和SVG

Question

我想在CSS中产生一个效果，使两个列彼此相邻一个svg，它将是产品的说明和一些文字，如描述。所以他们“滑入”我想用很多产品做到这一点。 但我完全卡住了。

第一：布局。我不能将两列（svg和文本）垂直对齐，我不能使它们彼此足够接近。

二：动画。文本在动画完成后消失，但仅在浏览器中消失，而不在Dreamweaver的实时模式中消失。

我完整的代码是在这里：http://pastebin.com/MkA7AQxA

我知道这可能被认为是2个不同的问题，并应单独公布，但也许问题是相关的。

非常感谢您的帮助，因为我非常焦虑。

#wrapper { 
 
    margin: 2em auto; 
 
    width:800px; 
 
    position:relative; 
 
    padding: 4rem 0;  
 
} 
 
    
 
.animBlock { 
 
    margin: 4rem -4rem 0 -2rem; 
 
    padding: 0; 
 
    list-style: none; 
 
    column-count: 2; 
 
           
 
} 
 
.animBlock li { 
 
    position:relative; 
 
    display: block;  
 
    padding: 0; 
 
    margin: 0 2rem 2rem 0; 
 
    text-decoration: none; 
 
    break-inside: avoid; 
 
    
 
} 
 
    
 
.animBlock_left { 
 
    animation-name: come_left; 
 
    animation-duration: 1s; 
 
    animation-iteration-count: 1; 
 
    animation-timing-function: ease; 
 
    animation-fill-mode: forwards; 
 
    
 
} 
 
    
 
.animBlock_right { 
 
    animation-name: come_right; 
 
    animation-duration: 1s; 
 
    animation-iteration-count: 1; 
 
    animation-timing-function: ease; 
 
    animation-fill-mode: forwards; 
 
    
 
} 
 
    
 
@keyframes come_left { 
 
     0% {transform: translateX(-200px); opacity:0;} 
 
     100% {transform: translateX(0);}  
 
} 
 
    
 
@keyframes come_right { 
 
     0% {transform: translateX(200px); }  
 
     100% {transform: translateX(0);}  
 
}

 
 
<div id="wrapper" > 
 
    
 
     
 
     
 
     <ul id="bote" data-position="left" class="animBlock"> 
 
     <li class="animBlock_left"> 
 
     <svg x="0px" y="0px" 
 
    viewBox="0 0 3000 3000" enable-background="new 0 0 2400 2400" > 
 
     <g> 
 
     <g> 
 
       <path fill="#BCBEC0" d="M153.1,1489.8c0,14,11.4,25.4,25.4,25.4H509c13.9,0,25.4-11.4,25.4-25.4v-406.9H153.1V1489.8z"/> 
 
       <path fill="#D1D3D4" d="M447.8,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8 
 
         c-7,0-12.7-5.7-12.7-12.7V1125.6z"/> 
 
       <path fill="#D1D3D4" d="M363,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8 
 
         c-7,0-12.7-5.7-12.7-12.7V1125.6z"/> 
 
       <path fill="#D1D3D4" d="M278.2,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8 
 
         c-7,0-12.7-5.7-12.7-12.7V1125.6z"/> 
 
       <path fill="#D1D3D4" d="M193.4,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8 
 
         c-7,0-12.7-5.7-12.7-12.7V1125.6z"/> 
 
     </g> 
 
     <path fill="#A7A9AC" d="M539.4,1019.2h-121v-13.1c0-7-5.7-12.7-12.7-12.7h-124c-7,0-12.7,5.7-12.7,12.7v13.1H148 
 
       c-7,0-12.7,5.7-12.7,12.7v38.3c0,7,5.7,12.7,12.7,12.7h391.4c7,0,12.7-5.7,12.7-12.7v-38.3C552.1,1024.9,546.4,1019.2,539.4,1019.2 
 
       z"/> 
 
</g> 
 
</svg> 
 
     </li> 
 
          <li id="boteTxt" data-position="right" class="animBlock_right"> 
 
      <h3>The New Product</h3> 
 
      <p>some deescription about the product</p> 
 
     </li> 
 
    </ul> 
 
     </div> 
 
    

Answer 1

问题1：周围SVG

太多空间。这是因为你的viewBox绝对是极大的相。你的垃圾箱图像大概是417x522，但你的viewBox说它是3000x3000。所以第一步是要解决这个问题：

<svg viewBox="135 994 417 522" ... 

问题2：动画在浏览器

你在Chrome或Safari任何机会测试不工作？ CSS动画还没有最终确定，因此您仍然需要在animation和@keyframes属性中使用-webkit-前缀。请注意，您还需要Firefox的前缀版本。

#wrapper { 
 
    margin: 2em auto; 
 
    width: 200px; 
 
    position:relative; 
 
    padding: 4rem 0;  
 
} 
 
    
 
.animBlock { 
 
    padding: 0; 
 
    list-style: none; 
 
    column-count: 2; 
 
           
 
} 
 
.animBlock li { 
 
    position:relative; 
 
    display: block;  
 
    padding: 0; 
 
    margin: 0 2rem 2rem 0; 
 
    text-decoration: none; 
 
    break-inside: avoid; 
 
    
 
} 
 
    
 
.animBlock_left { 
 
    -webkit-animation-name: come_left; 
 
    -webkit-animation-duration: 1s; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-animation-timing-function: ease; 
 
    -webkit-animation-fill-mode: forwards; 
 

 
    animation-name: come_left; 
 
    animation-duration: 1s; 
 
    animation-iteration-count: 1; 
 
    animation-timing-function: ease; 
 
    animation-fill-mode: forwards; 
 
} 
 
    
 
.animBlock_right { 
 
    -webkit-animation-name: come_right; 
 
    -webkit-animation-duration: 1s; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-animation-timing-function: ease; 
 
    -webkit-animation-fill-mode: forwards; 
 

 
    animation-name: come_right; 
 
    animation-duration: 1s; 
 
    animation-iteration-count: 1; 
 
    animation-timing-function: ease; 
 
    animation-fill-mode: forwards; 
 
} 
 
    
 

 
@-webkit-keyframes come_left { 
 
     0% {transform: translateX(-200px); opacity:0;} 
 
     100% {transform: translateX(0);}  
 
} 
 
    
 
@-webkit-keyframes come_right { 
 
     0% {transform: translateX(200px); }  
 
     100% {transform: translateX(0);}  
 
} 
 

 

 
@keyframes come_left { 
 
     0% {transform: translateX(-200px); opacity:0;} 
 
     100% {transform: translateX(0);}  
 
} 
 
    
 
@keyframes come_right { 
 
     0% {transform: translateX(200px); }  
 
     100% {transform: translateX(0);}  
 
}

<div id="wrapper" > 
 
    
 
     
 
     
 
     <ul id="bote" data-position="left" class="animBlock"> 
 
     <li class="animBlock_left"> 
 
     <svg x="0px" y="0px" viewBox="135 994 417 522" > 
 
     <g> 
 
     <g> 
 
       <path fill="#BCBEC0" d="M153.1,1489.8c0,14,11.4,25.4,25.4,25.4H509c13.9,0,25.4-11.4,25.4-25.4v-406.9H153.1V1489.8z"/> 
 
       <path fill="#D1D3D4" d="M447.8,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8 
 
         c-7,0-12.7-5.7-12.7-12.7V1125.6z"/> 
 
       <path fill="#D1D3D4" d="M363,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8 
 
         c-7,0-12.7-5.7-12.7-12.7V1125.6z"/> 
 
       <path fill="#D1D3D4" d="M278.2,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8 
 
         c-7,0-12.7-5.7-12.7-12.7V1125.6z"/> 
 
       <path fill="#D1D3D4" d="M193.4,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8 
 
         c-7,0-12.7-5.7-12.7-12.7V1125.6z"/> 
 
     </g> 
 
     <path fill="#A7A9AC" d="M539.4,1019.2h-121v-13.1c0-7-5.7-12.7-12.7-12.7h-124c-7,0-12.7,5.7-12.7,12.7v13.1H148 
 
       c-7,0-12.7,5.7-12.7,12.7v38.3c0,7,5.7,12.7,12.7,12.7h391.4c7,0,12.7-5.7,12.7-12.7v-38.3C552.1,1024.9,546.4,1019.2,539.4,1019.2 
 
       z"/> 
 
</g> 
 
</svg> 
 
     </li> 
 
          <li id="boteTxt" data-position="right" class="animBlock_right"> 
 
      <h3>The New Product</h3> 
 
      <p>some deescription about the product</p> 
 
     </li> 
 
    </ul> 
 
     </div>