我正在尝试编写一些CSS过渡，其中容器的子元素从上到下翻译，当它们到达容器的底部时，它们被重置到容器的顶部，就好像容器的底部是连接到容器的顶部。
我能够让翻译工作，但我无法让包装工作（或似乎工作）。在所有元素都满足动画之前，包裹似乎不会发生。 CSS动画可以实现吗？谢谢！
以下是jsfiddle的链接：My fiddle
function RainingCats() {
this.svgHtml = null;
this.width = window.innerWidth;
this.COLOR_UPDATE_INTERVAL = 250; // ms
this.$cats = [];
}
RainingCats.prototype.run = function() {
var self = this;
// Grab the template
var $svgTemplate = $('#svgCatTemplate');
// Update the color of each cat
var colorInterval = null;
this.V_MARGIN_PERCENT = 0.15;
this.H_MARGIN_PERCENT = 0.15;
this.svgHtml = $svgTemplate.html();
this.svgWidth = $svgTemplate.width();
this.svgHeight = $svgTemplate.height();
function getColorInterval() {
return setInterval(function() {
for(var i = 0; i < self.$cats.length; i++) {
var $cat = self.$cats[i];
$('.head', $cat).attr('style', 'fill: ' + self.getRandomColor() + ';');
$('.leftEye', $cat).attr('style', 'fill: ' + self.getRandomColor() + ';');
$('.leftPupil', $cat).attr('style', 'fill: ' + self.getRandomColor() + ';');
$('.rightEye', $cat).attr('style', 'fill: ' + self.getRandomColor() + ';');
$('.rightPupil', $cat).attr('style', 'fill: ' + self.getRandomColor() + ';');
}
}, self.COLOR_UPDATE_INTERVAL);
}
// Update width if window is resized
$(window).resize(function() {
self.render();
// Clear and reset interval
clearInterval(colorInterval);
colorInterval = getColorInterval();
// Remove all the cats from the DOM
self.$cats = [];
$('#animationTarget').html('');
// Recalculate sizing and draw cats
self.render();
});
self.render();
// Set the color interval to be stopped and reset on window resize
colorInterval = getColorInterval();
};
RainingCats.prototype.getRandomColor = function() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for(var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
RainingCats.prototype.render = function(left, top) {
var containerWidth = window.innerWidth;
var containerHeight = window.innerHeight;
var catHorizontalMargin = this.svgWidth * this.H_MARGIN_PERCENT;
var catVerticalMargin = this.svgHeight * this.V_MARGIN_PERCENT;
// Find maximum number of horizontal cats
var maxHorizontalCats = Math.floor(containerWidth / ((catHorizontalMargin) + this.svgWidth));
var maxVerticalCats = Math.floor(containerHeight / ((catVerticalMargin) + this.svgHeight));
var maxWidth = (maxHorizontalCats * this.svgWidth) + ((maxHorizontalCats - 1) * catHorizontalMargin);
var maxHeight = (maxVerticalCats * this.svgHeight) + ((maxVerticalCats - 1) * catVerticalMargin);
function randRange(minNum, maxNum) {
return(Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}
// Append all of the cats to the rain wrapper
for(var r = 0; r < maxVerticalCats; r++) {
for(var c = 0; c < maxHorizontalCats; c++) {
var $cat = $('<div/>', {
class: 'superCatContainer'
}).css({
width: this.svgWidth,
height: this.svgHeight,
top: ((containerHeight - maxHeight) / 2) + (r * this.svgHeight) + (r * catVerticalMargin),
left: ((containerWidth - maxWidth) / 2) + (c * this.svgWidth) + (c * catHorizontalMargin),
// background: this.getRandomColor()
}).html(this.svgHtml);
// Add the cat element to the cat array and then push to UI
this.$cats.push($cat);
$cat.appendTo($('#animationTarget'));
}
}
};
$(document).ready(function() {
new RainingCats().run();
});body {
margin: 0;
padding: 0;
}
.animationContainer {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
@keyframes fall {
to {
margin-top: 100%
}
}
.superCatContainer {
display: inline-block;
position: absolute;
overflow: hidden;
-webkit-animation: fall 2.5s linear infinite;
-moz-animation: fall 2.5s linear infinite;
}
.svgCat {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
animation-duration: 2s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="svgCatTemplate" style="display: none; width: 200px;height: 200px;">
<svg class="svgCat" viewBox="0 0 499.11249 286.82501" width="499.11249" height="286.82501" xml:space="preserve">
<g transform="matrix(1.25,0,0,-1.25,0,286.825)">
<g transform="scale(0.1,0.1)">
<g clip-path="url(#clipPath18)">
<path class="head" d="m 1829.38,651.012 c -4.44,14.398 0.35,27.758 -5.24,39.59 -20.98,0.898 -41.68,2.578 -62.14,4.886 0.9,-18.519 4.93,-40.976 12.22,-64.59 17.17,-55.628 45.67,-96.187 63.67,-90.668 -6.36,-1.968 6.33,62.68 -8.51,110.782" inkscape:connector-curvature="0" style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path class="head" d="m 2250.51,651.012 c -14.84,-48.102 -2.15,-112.75 -8.51,-110.782 18,-5.519 46.51,35.04 63.67,90.668 7.29,23.614 11.32,46.071 12.22,64.59 -20.46,-2.308 -41.16,-3.988 -62.14,-4.886 -5.58,-11.832 -0.8,-25.192 -5.24,-39.59" inkscape:connector-curvature="0" style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path class="rightEye" d="m 2591.93,1140.14 c -61.03,0 -110.5,49.47 -110.5,110.5 0,61.04 49.47,110.51 110.5,110.51 61.04,0 110.51,-49.47 110.51,-110.51 0,-61.03 -49.47,-110.5 -110.51,-110.5 z m 20.07,320.84 c -90.92,0 -164.63,-90.82 -164.63,-202.87 0,-112.03 73.71,-202.86 164.63,-202.86 90.94,0 164.65,90.83 164.65,202.86 0,112.05 -73.71,202.87 -164.65,202.87" inkscape:connector-curvature="0" style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path class="leftPupil" d="m 1440.95,1304.77 c -27.66,0 -50.09,-22.43 -50.09,-50.09 0,-27.67 22.43,-50.09 50.09,-50.09 27.65,0 50.09,22.42 50.09,50.09 0,27.66 -22.44,50.09 -50.09,50.09" inkscape:connector-curvature="0" style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path class="leftEye" d="m 1431.93,1133.46 c -64.71,0 -117.17,52.46 -117.17,117.18 0,64.71 52.46,117.17 117.17,117.17 64.72,0 117.18,-52.46 117.18,-117.17 0,-64.72 -52.46,-117.18 -117.18,-117.18 z m -27.52,327.52 c -90.93,0 -164.64,-90.82 -164.64,-202.87 0,-112.03 73.71,-202.86 164.64,-202.86 90.92,0 164.64,90.83 164.64,202.86 0,112.05 -73.72,202.87 -164.64,202.87" inkscape:connector-curvature="0" style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path class="rightPupil" d="m 2585.95,1304.77 c -27.66,0 -50.09,-22.43 -50.09,-50.09 0,-27.67 22.43,-50.09 50.09,-50.09 27.65,0 50.09,22.42 50.09,50.09 0,27.66 -22.44,50.09 -50.09,50.09" inkscape:connector-curvature="0" style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path class="head" d="m 2612,942.012 c -141.68,0 -256.54,141.518 -256.54,316.098 0,174.59 114.86,316.12 256.54,316.12 141.7,0 256.57,-141.53 256.57,-316.12 0,-174.58 -114.87,-316.098 -256.57,-316.098 z m -244.63,-206 c 6.86,1.199 10.79,1.59 10.79,0.57 0,-165.23 -62.32,-351.871 -156.4,-465.352 -16.5,20.918 -32.8,32.321 -42.03,27.442 -11.19,-5.902 -8.54,-33.793 4.99,-66.852 -44.74,-41.14 -94.89,-65.75 -147.85,-65.75 -54.26,0 -105.51,25.961 -151.06,68.93 7.99,36.48 5.66,66 -6.77,69.84 -8.89,2.762 -20.91,-8.281 -32.15,-27.399 -87.91,109.879 -146.86,283.809 -150.99,441.52 -65.42,42.719 -108.7,116.551 -108.7,200.508 0,6.883 0.36,13.652 0.92,20.371 10.35,-122.629 113.11,-218.981 238.43,-218.981 79.57,0 150.05,38.891 193.56,98.653 43.52,-59.762 113.99,-98.653 193.58,-98.653 125.31,0 228.08,96.352 238.43,218.981 0.56,-6.719 0.92,-13.488 0.92,-20.371 0,-73.668 -33.31,-139.547 -85.67,-183.457 z m -962.96,206 c -141.69,0 -256.56,141.518 -256.56,316.098 0,174.59 114.87,316.12 256.56,316.12 141.69,0 256.55,-141.53 256.55,-316.12 0,-174.58 -114.86,-316.098 -256.55,-316.098 z m 619.16,89.728 c 91.58,0 165.81,-31.57 165.81,-70.49 0,-38.93 -74.23,-70.488 -165.81,-70.488 -91.54,0 -165.79,31.558 -165.79,70.488 0,38.92 74.25,70.49 165.79,70.49 z m 1428.31,224.61 c 238.3,0 444.14,-98.8 540.97,-241.94 -85.92,160.88 -304.61,275.27 -560.97,275.27 -30.24,0 -59.89,-1.75 -88.95,-4.83 -16.5,96.82 -50.91,186.58 -100.64,268.39 51.22,82.91 211.86,619.33 168.96,692.97 -93.15,159.92 -511.49,-136.52 -692.15,-277.51 -207.39,84.5 -452.51,130.23 -715.19,130.23 -267.26,0 -516.37,-47.29 -726.03,-134.63 -178.07,139.53 -614.259,449.24 -697.802,281.91 -42.898,-85.92 177.371,-706.39 177.402,-706.44 -45.722,-78.71 -77.441,-164.54 -92.918,-256.78 -33.664,4.26 -68.222,6.69 -103.878,6.69 -256.368,0 -474.766,-114.39 -560.684,-275.27 96.8359,143.14 302.234,241.94 540.547,241.94 40.613,0 80.449,-3.07 119.015,-8.56 -3.71,-30.71 -5.714,-62.08 -5.8,-94.12 -226.907,-17.93 -415.141,-125.92 -493.469,-272.58 90.469,133.71 275.566,228.7 493.84,240.63 0.34,-17.12 0.847,-34.07 1.648,-50.71 l 9.004,-108.76 C 773.027,75.4883 1647.28,0 2003.91,0 2371.93,0 3235.58,118.531 3343.04,969.41 l 9.25,110.08 c 0.63,13.6 1.08,27.35 1.39,41.23 211.71,-15.41 390.84,-109.04 479.19,-239.65 -76.56,143.37 -258.63,249.75 -478.79,271.22 -0.04,33.14 -2.15,65.54 -6.05,97.26 33.57,4.3 68.01,6.8 103.85,6.8" inkscape:connector-curvature="0" style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
</g>
</g>
</svg>
</div>
<div id="animationTarget" class="animationContainer"></div>