動畫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>