动画 CSS 列和 SVG
Animating CSS columns and SVG
我正在尝试在 CSS 中产生一种效果，将两列并排放置，一个 svg 将作为产品的插图，还有一些文本（如描述）。所以他们 "slide-in" 我想用很多产品来做这个。
但我完全被困住了。
第一：布局。我无法垂直对齐两列（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>
问题 1：space 围绕 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>
我正在尝试在 CSS 中产生一种效果，将两列并排放置，一个 svg 将作为产品的插图，还有一些文本（如描述）。所以他们 "slide-in" 我想用很多产品来做这个。 但我完全被困住了。
第一：布局。我无法垂直对齐两列（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>
问题 1：space 围绕 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>