svg 动画不起作用。然而,它是有效代码的副本
The svg animation does not work. Yet it's a copy of a code that works
为什么 SVG 动画在 this original CodePen, but not in my copy on JSFiddle 中有效?
我应该调用 JS 库吗?
Original:
HTML
<div>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" viewBox="0 0 400 300" enable-background="new 0 0 400 300" xml:space="preserve">
<defs>
</defs>
<rect fill="#FDFDF8" width="400" height="300"/>
<g id="pocketknife">
<path fill="#E44125" d="M181.9,211H198h17.2h16.7c9.9,0,18.1,7.8,18.1,17.3v6.3c0,1-1,1.8-2,1.8s-2-0.8-2-1.8v-6.3
c0-7.5-6.3-13.3-14.1-13.3h-16.7H198h-16.1c-7.8,0-12.9,5.6-12.9,13.3v6.3c0,1-1,1.8-2,1.8s-2-0.8-2-1.8v-6.3
C165,218.6,172.2,211,181.9,211z"/>
<g id="knifeblade">
<g>
<path fill="#FDFDF8" d="M167,234v-39.6c9-3.9,13.2-11.9,13.2-21.2c0-1.1-0.1-2.2-0.2-3.2c0.9-0.2,2.1-0.3,3.1-0.3
c8.7,0,16,7.1,16,15.8V218"/>
<path fill="#E44125" d="M167,236.2c1,0,2-0.8,2-1.8v-38.8c8-4.2,13.1-12.5,13.1-22.3c0-0.6-0.1-1.1-0.1-1.6c0.3,0,0.7,0,1,0
c7.7,0,14,6.2,14,13.9v32.9c0,1,0.5,1.8,1.5,1.8s1.5-0.8,1.5-1.8v-32.9c0-9.7-7.7-17.6-17.4-17.6c-1,0-2.1,0.1-3.1,0.3
c-1,0.2-1.6,1.1-1.4,2.1c0.1,0.9,0.2,1.9,0.2,2.9c0,8.9-4.5,16.2-12.1,19.6c-0.7,0.3-1,1-1,1.7v39.9
C165,235.4,166,236.2,167,236.2z"/>
</g>
<path fill="#E44125" d="M172.3,224.6c1,0,1.8-0.8,1.8-1.8v-20.7c0-1-0.8-1.8-1.8-1.8s-1.8,0.8-1.8,1.8v20.7
C170.5,223.8,171.3,224.6,172.3,224.6z"/>
</g>
<path fill="none" stroke="#E44125" stroke-width="3.5043" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M167,228.3"/>
<path fill="#FDFDF8" d="M246,233.9c0-7.7-6.2-13.9-13.9-13.9h-49.1c-7.7,0-13.9,6.2-13.9,13.9v0.1c0,7.7,6.2,13.9,13.9,13.9h49.1
c7.7,0,13.9-6.2,13.9-13.9V233.9z"/>
<path fill="#E44125" d="M227.5,233.6c0-2.9,2.4-5.3,5.3-5.3s5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3S227.5,236.5,227.5,233.6z
M231,233.6c0,1,0.8,1.8,1.8,1.8c1,0,1.8-0.8,1.8-1.8c0-1-0.8-1.8-1.8-1.8C231.8,231.8,231,232.6,231,233.6z"/>
<path fill="#E44125" d="M250,234.4c0,9.7-7.9,17.6-17.6,17.6h-49.8c-9.7,0-17.6-7.9-17.6-17.6v-0.8c0-9.7,7.9-17.6,17.6-17.6h49.8
c9.7,0,17.6,7.9,17.6,17.6V234.4z M246,233.9c0-7.7-6.2-13.9-13.9-13.9h-49.1c-7.7,0-13.9,6.2-13.9,13.9v0.1
c0,7.7,6.2,13.9,13.9,13.9h49.1c7.7,0,13.9-6.2,13.9-13.9V233.9z"/>
</g>
<g id="compass_1_">
<path id="dial" fill="#E44125" d="M105.1,232l-10.9-10.9c0.3-0.7,0.5-1.5,0.5-2.3c0-1.4-0.5-2.7-1.5-3.7c-1.6-1.6-4-1.9-6-1
l-10.9-10.9c-0.7-0.7-1.8-0.7-2.5,0c-0.7,0.7-0.7,1.8,0,2.5l10.9,10.9c-0.3,0.7-0.5,1.5-0.5,2.3c0,1.4,0.5,2.7,1.5,3.7
c1,1,2.3,1.5,3.7,1.5c0.8,0,1.6-0.2,2.3-0.5l10.9,10.9c0.3,0.3,0.8,0.5,1.2,0.5c0.4,0,0.9-0.2,1.2-0.5
C105.8,233.8,105.8,232.7,105.1,232z M88.2,220.1L88.2,220.1c-0.3-0.3-0.5-0.8-0.5-1.2c0-0.5,0.2-0.9,0.5-1.2
c0.3-0.3,0.8-0.5,1.2-0.5c0.4,0,0.9,0.2,1.2,0.5c0.3,0.3,0.5,0.8,0.5,1.2c0,0.5-0.2,0.9-0.5,1.2C90.1,220.8,88.9,220.8,88.2,220.1z
"/>
<path fill="#E44125" d="M89.5,254.8c-19.8,0-35.9-16.1-35.9-35.9c0-19.8,16.1-35.9,35.9-35.9s35.9,16.1,35.9,35.9
C125.4,238.7,109.3,254.8,89.5,254.8z M89.5,186.4c-17.9,0-32.4,14.5-32.4,32.4s14.5,32.4,32.4,32.4s32.4-14.5,32.4-32.4
S107.4,186.4,89.5,186.4z"/>
<path id="stopper_1_" fill="#E44125" d="M94.8,175.9c0-2.9-2.4-5.3-5.3-5.3s-5.4,2.4-5.4,5.3c0,2.1,0.9,3.9,2.9,4.7v3.6
c0,1,1,1.8,2,1.8s2-0.8,2-1.8V181C93,180.3,94.8,178.3,94.8,175.9z M89.8,177.7c-0.2-0.1-0.4-0.1-0.7-0.1c-0.1,0-0.2,0-0.3,0
c-0.6-0.3-1.1-0.9-1.1-1.6c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8C91.2,176.8,90.6,177.5,89.8,177.7z"/>
<path fill="#E44125" d="M89.5,189.1c-16.4,0-29.8,13.4-29.8,29.8s13.4,29.8,29.8,29.8s29.8-13.4,29.8-29.8S105.9,189.1,89.5,189.1z
M91,245.1v-4.3c0-1-1-1.8-2-1.8s-2,0.8-2,1.8v4.3c-12-1.1-22.6-11-23.7-24h4.3c1,0,1.8-1,1.8-2s-0.8-2-1.8-2h-4.3
C64,204,74,193.8,87,192.7v5.1c0,1,1,1.8,2,1.8s2-0.8,2-1.8v-5.1c13,0.7,24,11.4,24.7,24.4h-5.1c-1,0-1.8,1-1.8,2s0.8,2,1.8,2h5.1
C114.6,234,104,244.4,91,245.1z"/>
</g>
<g id="zippo">
<path id="flame" fill="#E44125" d="M304.7,182.5c-4.6,0-7.5,7.1-7.5,10.9c0,4.2,3.4,7.5,7.5,7.5c4.2,0,7.5-3.4,7.5-7.5
C312.2,189.6,309.3,182.5,304.7,182.5z M304.7,197.6c-2.3,0-4.2-1.9-4.2-4.2c0-2.8,2.4-7.5,4.2-7.5s4.2,4.7,4.2,7.5
C308.9,195.7,307,197.6,304.7,197.6z"/>
<g>
<path fill="#E44125" d="M325.5,213H318v-10.1c0-3-2.2-4.9-5.1-4.9h-15.8c-2.5,0-4.4,1.5-5,3.7c-0.6-0.3-1.3-0.5-2-0.5
c-2.9,0-5.3,2.3-5.3,5.2c0,2.9,2.3,5.2,5.2,5.2c0.7,0,0.9-0.1,1.9-0.4v1.7h-9c0,0-3-0.2-3,2.7c0,3.4,0,19.6,0,19.6
c0,8.9,6.9,16.7,15.4,16.7h17.5c8.6,0,16.1-7.7,16.1-16.7c0,0,0-16.4,0-19.5C329,212.7,325.5,213,325.5,213z M290.2,208.2
c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8c1,0,1.8,0.8,1.8,1.8C291.9,207.4,291.1,208.2,290.2,208.2z M296,202.9
c0-0.9,0.2-1.9,1.2-1.9h15.8c0.4,0,1.1,0.5,1.1,1.9V213h-18V202.9z M312.9,248h-17.5c-6.5,0-11.4-5.7-11.4-12.7V217h41v18.3
C325,242.3,319.6,248,312.9,248z"/>
<path fill="#E44125" d="M309.2,205h-8.6c-1,0-1.8,1-1.8,2s0.8,2,1.8,2h8.6c1,0,1.8-1,1.8-2S310.2,205,309.2,205z"/>
</g>
<g id="zippocap">
<path fill="#FDFDF8" d="M325.5,214.4H283v-19.9c0,0-1.2-10.4,21.1-10.6s21.4,10.6,21.4,10.6V214.4z"/>
<path fill="#E44125" d="M329,198.1v16.6c0,1.1-0.9,2.3-2,2.3h-44.6c-1.1,0-2.5-1.3-2.5-2.3v-16.6c0-9.4,7.8-16.1,17.2-16.1h15
C321.5,182,329,188.8,329,198.1z M325,213v-14.9c0-7.2-5.6-12.1-12.8-12.1h-15c-7.2,0-13.2,4.8-13.2,12.1V213H325z"/>
</g>
</g>
<g id="lantern">
<path id="lanternflame" fill="#E44125" d="M87.7,100.1c-4.3,0-7.9-3.5-7.9-7.9c0-3.9,3.1-11.4,7.9-11.4c4.8,0,7.9,7.5,7.9,11.4
C95.6,96.5,92.1,100.1,87.7,100.1z M87.7,84.3c-1.9,0-4.4,5-4.4,7.9c0,2.4,2,4.4,4.4,4.4c2.4,0,4.4-2,4.4-4.4
C92.1,89.3,89.6,84.3,87.7,84.3z"/>
<path fill="#E44125" d="M120,101.6V84.2c0-7.8-5.5-14.3-12.9-15.6c-1.9-6.5-7.8-11.1-14.6-11.3c0.2-0.6,0.4-1.3,0.4-2
c0-2.9-2.3-5.3-5.2-5.3c-2.9,0-5.2,2.4-5.2,5.3c0,0.7,0.1,1.4,0.4,2C76,57.6,70,62.1,68.1,68.5C60.2,69.4,54,76.1,54,84.2v17.4
c0,8.4,7,15.2,15,15.8v4.6h-6.7c-3.1,0-3.3,2.8-3.3,3.5v7.4c0,1,0.8,2.2,1.9,2.2h54c1,0,2.1-1.1,2.1-2.2v-7.4
c0-1.4-1.2-3.5-3.9-3.5H107v-4.7C115,116.2,120,109.6,120,101.6z M87.7,53.6c1,0,1.8,0.8,1.8,1.8s-0.8,1.8-1.8,1.8S86,56.4,86,55.4
S86.8,53.6,87.7,53.6z M83.3,61h8.8c4.9,0,9.3,3,11.2,7H72.1C74,64,78.3,61,83.3,61z M58,101.6V84.2c0-6.3,4.8-11.6,11-12.1
c0.1,0,36.4,0,36.8,0c0,0,0.2,0,0.2,0c6.1,0.7,10,5.8,10,12.1v17.4c0,6.7-4.8,12.4-11.5,12.4H98v-7.8c0-2-1.2-3.2-3.3-3.2H90v-8.8
c0-1-1-1.8-2-1.8s-2,0.8-2,1.8v8.8h-5.3c-1.9,0-3.7,1.2-3.7,3.2v7.8h-7C63.2,114,58,108.3,58,101.6z M80.1,114l0-7.5l14.9-0.1v7.6
H80.1z M113,131H63v-5h50V131z M73,122v-4h30v4H73z"/>
<path fill="#E44125" d="M63,103.4c-1,0-2-0.8-2-1.8v-6.1c0-1,1-1.8,2-1.8s2,0.8,2,1.8v6.1C65,102.5,64,103.4,63,103.4z"/>
<path fill="#E44125" d="M63,91.1c-1,0-2-0.8-2-1.8v-4.1c0-5.3,4.5-9.4,10-9.4c1,0,2,0.8,2,1.8s-0.8,1.8-1.9,1.8
c-3.4,0-6.1,2.5-6.1,5.8v4.1C65,90.3,64,91.1,63,91.1z"/>
</g>
<g id="toiletpaper">
<g id="paper">
<path fill="#E44125" d="M243.7,59H191c-1,0-1.8,0.5-1.8,1.5s0.8,1.5,1.8,1.5h40v1.8c0,1,1,1.8,2,1.8s2-0.8,2-1.8V62h7v55.5l-7,0
v-5.9c0-1-1-1.8-2-1.8s-2,0.8-2,1.8v5.9l-12.1,0.1c-1,0-1.7,0.9-1.7,1.9c0,1,1.9,1.6,1.9,1.6l24.5,0c1.6,0,2.4-1.9,2.4-3.4V61.3
C246,60.7,245.5,59,243.7,59z"/>
<path fill="#E44125" d="M233,79.1c1,0,2-0.8,2-1.8v-4.9c0-1-1-1.8-2-1.8s-2,0.8-2,1.8v4.9C231,78.3,232,79.1,233,79.1z"/>
<path fill="#E44125" d="M231,90.8c0,1,1,1.8,2,1.8s2-0.8,2-1.8v-6.1c0-1-1-1.8-2-1.8s-2,0.8-2,1.8V90.8z"/>
<path fill="#E44125" d="M231,103.1c0,1,1,1.8,2,1.8s2-0.8,2-1.8v-4.9c0-1-1-1.8-2-1.8s-2,0.8-2,1.8V103.1z"/>
</g>
<path fill="#FFFFFF" d="M220,68v58c0,0-9.5,10.5-30.1,9.9c-19.2-0.6-29.9-9.9-29.9-9.9l-23.3-68c0,0,28.8,0.1,54.3,1.1
S220,68,220,68z"/>
<g>
<g>
<g>
<path fill="#FDFDF8" d="M191.6,62.2l-0.1,2.6c-0.3,0-0.5,0-0.8,0c-9,0-9.7,2.7-9.7,3.5c0,0.8,0.7,3.5,9.7,3.5c0.3,0,0.6,0,0.8,0
l0,2.6c-0.3,0-0.6,0-0.9,0c-17,0.1-26.3-4.1-26.3-6.1c0-2.1,9.3-6.5,26.3-6.1C191.1,62.2,191.4,62.2,191.6,62.2z"/>
<path fill="#FDFDF8" d="M191.6,62.2c26.5,0.7,24.9,6.1,24.9,6.1c-0.1,1.7-7.1,5.9-24.9,6.1l0-2.6c8.2-0.2,8.9-2.7,8.9-3.5
c0-0.8-0.7-3.3-8.9-3.5L191.6,62.2z"/>
<path fill="#E44125" d="M220,68.4c0,0.3,0,56.7,0,56.9c0,8-15.2,12.4-29.6,12.3c-21.7-0.3-29.4-7.5-30.4-11.9V67.9
c0-4.4,13.1-9.2,30.4-9.2C210.8,58.7,220,63.7,220,68.4z M216.5,68.3c0,0,1.6-5.4-24.9-6.1c-0.3,0-0.6,0-0.9,0
c-17-0.4-26.3,4-26.3,6.1c0,2.1,9.3,6.2,26.3,6.1c0.3,0,0.6,0,0.9,0C209.5,74.3,216.4,70.1,216.5,68.3z M216,125.6V73.3
c-5,2.7-12.2,4.7-25.2,4.7c-5.7,0-10.8-0.4-14.8-1.1v3.3c0,1-0.5,1.8-1.5,1.8s-1.5-0.8-1.5-1.8v-4c-4-0.9-7-2.1-9-3.4v51.3
c0,0,0,4.8,9,7.4v-3.3c0-1,0.5-1.8,1.5-1.8s1.5,0.8,1.5,1.8v4.4c4,1,9.3,1.6,14.8,1.6C212.8,133.9,216,125.8,216,125.6z"/>
<path fill="#FDFDF8" d="M216,73.3v52.3c0,0.2-3.2,8.3-25.2,8.4c-5.5,0-10.8-0.6-14.8-1.6v-4.4c0-1-0.5-1.8-1.5-1.8
s-1.5,0.8-1.5,1.8v3.3c-9-2.6-9-7.4-9-7.4V72.8c2,1.3,5,2.5,9,3.4v4c0,1,0.5,1.8,1.5,1.8s1.5-0.8,1.5-1.8v-3.3
c4,0.7,9.1,1.1,14.8,1.1C203.8,78,211,76,216,73.3z M176,119.5v-4.9c0-1-0.5-1.8-1.5-1.8s-1.5,0.8-1.5,1.8v4.9
c0,1,0.5,1.8,1.5,1.8S176,120.5,176,119.5z M176,107.2v-6.1c0-1-0.5-1.8-1.5-1.8s-1.5,0.8-1.5,1.8v6.1c0,1,0.5,1.8,1.5,1.8
S176,108.2,176,107.2z M176,93.7v-4.9c0-1-0.5-1.8-1.5-1.8s-1.5,0.8-1.5,1.8v4.9c0,1,0.5,1.8,1.5,1.8S176,94.7,176,93.7z"/>
<path fill="#E44125" d="M191.6,64.9c8.2,0.2,8.9,2.7,8.9,3.5c0,0.8-0.7,3.3-8.9,3.5c-0.3,0-0.5,0-0.8,0c-9,0-9.7-2.7-9.7-3.5
c0-0.8,0.7-3.5,9.7-3.5C191,64.9,191.3,64.9,191.6,64.9z"/>
<path fill="#E44125" d="M176,114.6v4.9c0,1-0.5,1.8-1.5,1.8s-1.5-0.8-1.5-1.8v-4.9c0-1,0.5-1.8,1.5-1.8S176,113.6,176,114.6z"/>
<path fill="#E44125" d="M176,101.1v6.1c0,1-0.5,1.8-1.5,1.8s-1.5-0.8-1.5-1.8v-6.1c0-1,0.5-1.8,1.5-1.8S176,100.1,176,101.1z"/>
<path fill="#E44125" d="M176,88.8v4.9c0,1-0.5,1.8-1.5,1.8s-1.5-0.8-1.5-1.8v-4.9c0-1,0.5-1.8,1.5-1.8S176,87.8,176,88.8z"/>
</g>
<g>
</g>
</g>
</g>
</g>
<g id="axe">
<path fill="#E44125" d="M281,126.4c-2.1,2-2.1,5.4,0,7.4c1,1,2.4,1.5,3.7,1.5c1.3,0,2.7-0.5,3.7-1.5c2.1-2,2.1-5.4,0-7.4
C286.4,124.4,283.1,124.4,281,126.4z M286,131.4c-0.7,0.7-1.8,0.7-2.5,0c-0.7-0.7-0.7-1.8,0-2.5c0.3-0.3,0.8-0.5,1.2-0.5
c0.4,0,0.9,0.2,1.2,0.5C286.7,129.6,286.7,130.7,286,131.4z"/>
<path fill="#E44125" d="M357.4,90.9l-7.4-7.4c0,0,0,0,0,0l-8.1-8.1l3.1-3.1c1.4-1.4,1.4-3.6,0-5l-9.9-9.9c-1.4-1.4-3.6-1.4-5,0
l-3.1,3.1l-0.6-0.6c-1.3-1.3-3.6-1.3-5,0l-16.7,16.7c-0.7,0.7-1,1.5-1,2.5c0,0.9,0.4,1.8,1,2.5l0.7,0.7l-29.3,28.9
c-2.3,2.3-2.7,5.1-2.7,6.6l0,12.3c0,5.9,4.5,10.7,10.4,10.7c11,0,11.4-9.3,11.4-9.3l0-8.5l24.5-25.2l8,19.2c0.3,0.7,1,1.1,1.7,1.1
c0.2,0,0.3,0,0.5-0.1c0.4-0.1,10.8-3.1,18.5-10.8c7-7,9.2-14.3,9.3-14.6C358,92.1,357.8,91.4,357.4,90.9z M332.6,60l9.9,9.9
l-3.1,3.1l-9.9-9.9L332.6,60z M317.8,94.8l-1.2,1.3l-9.8-9.8L308,85L317.8,94.8z M292.3,121c-0.3,0.3-0.3,0.8-0.3,1.3v6.8
c0,0,0.6,8.1-7.7,8.1c-3.8,0-7-3.1-7-7l0-12.3c0-0.7,0.1-2.6,1.5-4l5-4.9l3.6,3.6c0.8,0.8,1.9,1.3,3.1,1.3c1.2,0,2.3-0.5,3.1-1.3
c1.7-1.7,1.7-4.5,0-6.2c-0.7-0.7-1.8-0.7-2.5,0c-0.7,0.7-0.7,1.8,0,2.5c0.3,0.3,0.3,0.9,0,1.2c-0.2,0.2-0.5,0.3-0.6,0.3
s-0.4,0-0.6-0.3l-3.6-3.6l18.1-17.9l9.9,9.9l-2.7,3.1l-3.5-3.9c0,0,0,0,0,0c-3-1.7-4.9-1.7-6.6,0c-0.8,0.8-1.5,1.9-1.5,3.1
c0,1.2,0.4,2.3,1.2,3.1c0.3,0.3,0.3,0.9,0,1.2c-0.3,0.3-0.9,0.3-1.3,0c-0.7-0.7-1.8-0.7-2.5,0c-0.7,0.7-0.7,1.8,0,2.5
c0.9,0.9,2,1.3,3.1,1.3c1.1,0,2.2-0.4,3.1-1.3c1.7-1.7,1.7-4.5,0-6.2c-0.2-0.2-0.3-0.5-0.3-0.6c0-0.1,0-0.4,0.3-0.6
c0.2-0.2,0.5-0.4,0.6-0.4c0.2,0,0.5,0.1,0.6,0.1c0,0,0,0,0,0l4,4L292.3,121z M307.2,79.2l16.7-16.7l22.7,22.7
c-1.1,2.3-3.9,8.1-7.5,11.7c-4,4-9.6,7-12.3,8.4l-4.4-10.6C322.4,94.5,307.2,79.2,307.2,79.2z M346,104.8
c-5.4,5.4-12.5,8.3-15.5,9.4l-2.4-5.7c2.8-1.4,9-4.7,13.4-9.1c3.5-3.5,6.2-8.6,7.7-11.5l4.9,4.9C353.3,94.7,351,99.8,346,104.8z"/>
</g>
</svg>
</div>
CSS
body{background-color:#FDFDF8}
div{
width:800px;
height:600px;
}
JS
var animateIcons = new TimelineMax({repeat:-1})
animateIcons.to($('#lanternflame'),.5,{scale:0,transformOrigin:'50% 100%',ease:Power2.easeOut})
.to($('#lanternflame'),.5,{scale:1,transformOrigin:'50% 100%',ease:Power2.easeOut})
.to($('#paper'),.25,{x:'-=50'})
.to($('#paper'),.25,{x:'+=50'})
.to($('#axe'),.25,{rotation:30,transformOrigin:'30% 100%'})
.to($('#axe'),.25,{rotation:0,transformOrigin:'30% 100%'})
.to($('#dial'),.5,{rotation:360,transformOrigin:'50% 50%',ease:Bounce.easeInOut})
.to($('#knifeblade'),.25,{rotation:88,transformOrigin:'53% 100%'})
.to($('#knifeblade'),.25,{rotation:0,transformOrigin:'53% 100%'},'+=.25')
.to($('#zippocap'),.25,{rotation:90,transformOrigin:'100% 100%'})
.from($('#flame'),.5,{scale:0,transformOrigin:'50% 100%',ease:Bounce.easeOut})
.to($('#zippocap'),.25,{rotation:0,transformOrigin:'100% 100%'})
Mine
HTML
<div>
<h3>
D'aprés David McFeders <br>
Depuis : codepen.io <br>
<a href="https://codepen.io/iconjunkie/pen/PZxZKE">lien </a>
</h3>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" viewBox="0 0 400 300" enable-background="new 0 0 400 300" xml:space="preserve">
<defs>
</defs>
<rect fill="#FDFDF8" width="400" height="300"/>
<g id="pocketknife">
<path fill="#E44125" d="M181.9,211H198h17.2h16.7c9.9,0,18.1,7.8,18.1,17.3v6.3c0,1-1,1.8-2,1.8s-2-0.8-2-1.8v-6.3
c0-7.5-6.3-13.3-14.1-13.3h-16.7H198h-16.1c-7.8,0-12.9,5.6-12.9,13.3v6.3c0,1-1,1.8-2,1.8s-2-0.8-2-1.8v-6.3
C165,218.6,172.2,211,181.9,211z"/>
<g id="knifeblade">
<g>
<path fill="#FDFDF8" d="M167,234v-39.6c9-3.9,13.2-11.9,13.2-21.2c0-1.1-0.1-2.2-0.2-3.2c0.9-0.2,2.1-0.3,3.1-0.3
c8.7,0,16,7.1,16,15.8V218"/>
<path fill="#E44125" d="M167,236.2c1,0,2-0.8,2-1.8v-38.8c8-4.2,13.1-12.5,13.1-22.3c0-0.6-0.1-1.1-0.1-1.6c0.3,0,0.7,0,1,0
c7.7,0,14,6.2,14,13.9v32.9c0,1,0.5,1.8,1.5,1.8s1.5-0.8,1.5-1.8v-32.9c0-9.7-7.7-17.6-17.4-17.6c-1,0-2.1,0.1-3.1,0.3
c-1,0.2-1.6,1.1-1.4,2.1c0.1,0.9,0.2,1.9,0.2,2.9c0,8.9-4.5,16.2-12.1,19.6c-0.7,0.3-1,1-1,1.7v39.9
C165,235.4,166,236.2,167,236.2z"/>
</g>
<path fill="#E44125" d="M172.3,224.6c1,0,1.8-0.8,1.8-1.8v-20.7c0-1-0.8-1.8-1.8-1.8s-1.8,0.8-1.8,1.8v20.7
C170.5,223.8,171.3,224.6,172.3,224.6z"/>
</g>
<path fill="none" stroke="#E44125" stroke-width="3.5043" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M167,228.3"/>
<path fill="#FDFDF8" d="M246,233.9c0-7.7-6.2-13.9-13.9-13.9h-49.1c-7.7,0-13.9,6.2-13.9,13.9v0.1c0,7.7,6.2,13.9,13.9,13.9h49.1
c7.7,0,13.9-6.2,13.9-13.9V233.9z"/>
<path fill="#E44125" d="M227.5,233.6c0-2.9,2.4-5.3,5.3-5.3s5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3S227.5,236.5,227.5,233.6z
M231,233.6c0,1,0.8,1.8,1.8,1.8c1,0,1.8-0.8,1.8-1.8c0-1-0.8-1.8-1.8-1.8C231.8,231.8,231,232.6,231,233.6z"/>
<path fill="#E44125" d="M250,234.4c0,9.7-7.9,17.6-17.6,17.6h-49.8c-9.7,0-17.6-7.9-17.6-17.6v-0.8c0-9.7,7.9-17.6,17.6-17.6h49.8
c9.7,0,17.6,7.9,17.6,17.6V234.4z M246,233.9c0-7.7-6.2-13.9-13.9-13.9h-49.1c-7.7,0-13.9,6.2-13.9,13.9v0.1
c0,7.7,6.2,13.9,13.9,13.9h49.1c7.7,0,13.9-6.2,13.9-13.9V233.9z"/>
</g>
<g id="compass_1_">
<path id="dial" fill="#E44125" d="M105.1,232l-10.9-10.9c0.3-0.7,0.5-1.5,0.5-2.3c0-1.4-0.5-2.7-1.5-3.7c-1.6-1.6-4-1.9-6-1
l-10.9-10.9c-0.7-0.7-1.8-0.7-2.5,0c-0.7,0.7-0.7,1.8,0,2.5l10.9,10.9c-0.3,0.7-0.5,1.5-0.5,2.3c0,1.4,0.5,2.7,1.5,3.7
c1,1,2.3,1.5,3.7,1.5c0.8,0,1.6-0.2,2.3-0.5l10.9,10.9c0.3,0.3,0.8,0.5,1.2,0.5c0.4,0,0.9-0.2,1.2-0.5
C105.8,233.8,105.8,232.7,105.1,232z M88.2,220.1L88.2,220.1c-0.3-0.3-0.5-0.8-0.5-1.2c0-0.5,0.2-0.9,0.5-1.2
c0.3-0.3,0.8-0.5,1.2-0.5c0.4,0,0.9,0.2,1.2,0.5c0.3,0.3,0.5,0.8,0.5,1.2c0,0.5-0.2,0.9-0.5,1.2C90.1,220.8,88.9,220.8,88.2,220.1z
"/>
<path fill="#E44125" d="M89.5,254.8c-19.8,0-35.9-16.1-35.9-35.9c0-19.8,16.1-35.9,35.9-35.9s35.9,16.1,35.9,35.9
C125.4,238.7,109.3,254.8,89.5,254.8z M89.5,186.4c-17.9,0-32.4,14.5-32.4,32.4s14.5,32.4,32.4,32.4s32.4-14.5,32.4-32.4
S107.4,186.4,89.5,186.4z"/>
<path id="stopper_1_" fill="#E44125" d="M94.8,175.9c0-2.9-2.4-5.3-5.3-5.3s-5.4,2.4-5.4,5.3c0,2.1,0.9,3.9,2.9,4.7v3.6
c0,1,1,1.8,2,1.8s2-0.8,2-1.8V181C93,180.3,94.8,178.3,94.8,175.9z M89.8,177.7c-0.2-0.1-0.4-0.1-0.7-0.1c-0.1,0-0.2,0-0.3,0
c-0.6-0.3-1.1-0.9-1.1-1.6c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8C91.2,176.8,90.6,177.5,89.8,177.7z"/>
<path fill="#E44125" d="M89.5,189.1c-16.4,0-29.8,13.4-29.8,29.8s13.4,29.8,29.8,29.8s29.8-13.4,29.8-29.8S105.9,189.1,89.5,189.1z
M91,245.1v-4.3c0-1-1-1.8-2-1.8s-2,0.8-2,1.8v4.3c-12-1.1-22.6-11-23.7-24h4.3c1,0,1.8-1,1.8-2s-0.8-2-1.8-2h-4.3
C64,204,74,193.8,87,192.7v5.1c0,1,1,1.8,2,1.8s2-0.8,2-1.8v-5.1c13,0.7,24,11.4,24.7,24.4h-5.1c-1,0-1.8,1-1.8,2s0.8,2,1.8,2h5.1
C114.6,234,104,244.4,91,245.1z"/>
</g>
<g id="zippo">
<path id="flame" fill="#E44125" d="M304.7,182.5c-4.6,0-7.5,7.1-7.5,10.9c0,4.2,3.4,7.5,7.5,7.5c4.2,0,7.5-3.4,7.5-7.5
C312.2,189.6,309.3,182.5,304.7,182.5z M304.7,197.6c-2.3,0-4.2-1.9-4.2-4.2c0-2.8,2.4-7.5,4.2-7.5s4.2,4.7,4.2,7.5
C308.9,195.7,307,197.6,304.7,197.6z"/>
<g>
<path fill="#E44125" d="M325.5,213H318v-10.1c0-3-2.2-4.9-5.1-4.9h-15.8c-2.5,0-4.4,1.5-5,3.7c-0.6-0.3-1.3-0.5-2-0.5
c-2.9,0-5.3,2.3-5.3,5.2c0,2.9,2.3,5.2,5.2,5.2c0.7,0,0.9-0.1,1.9-0.4v1.7h-9c0,0-3-0.2-3,2.7c0,3.4,0,19.6,0,19.6
c0,8.9,6.9,16.7,15.4,16.7h17.5c8.6,0,16.1-7.7,16.1-16.7c0,0,0-16.4,0-19.5C329,212.7,325.5,213,325.5,213z M290.2,208.2
c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8c1,0,1.8,0.8,1.8,1.8C291.9,207.4,291.1,208.2,290.2,208.2z M296,202.9
c0-0.9,0.2-1.9,1.2-1.9h15.8c0.4,0,1.1,0.5,1.1,1.9V213h-18V202.9z M312.9,248h-17.5c-6.5,0-11.4-5.7-11.4-12.7V217h41v18.3
C325,242.3,319.6,248,312.9,248z"/>
<path fill="#E44125" d="M309.2,205h-8.6c-1,0-1.8,1-1.8,2s0.8,2,1.8,2h8.6c1,0,1.8-1,1.8-2S310.2,205,309.2,205z"/>
</g>
<g id="zippocap">
<path fill="#FDFDF8" d="M325.5,214.4H283v-19.9c0,0-1.2-10.4,21.1-10.6s21.4,10.6,21.4,10.6V214.4z"/>
<path fill="#E44125" d="M329,198.1v16.6c0,1.1-0.9,2.3-2,2.3h-44.6c-1.1,0-2.5-1.3-2.5-2.3v-16.6c0-9.4,7.8-16.1,17.2-16.1h15
C321.5,182,329,188.8,329,198.1z M325,213v-14.9c0-7.2-5.6-12.1-12.8-12.1h-15c-7.2,0-13.2,4.8-13.2,12.1V213H325z"/>
</g>
</g>
<g id="lantern">
<path id="lanternflame" fill="#E44125" d="M87.7,100.1c-4.3,0-7.9-3.5-7.9-7.9c0-3.9,3.1-11.4,7.9-11.4c4.8,0,7.9,7.5,7.9,11.4
C95.6,96.5,92.1,100.1,87.7,100.1z M87.7,84.3c-1.9,0-4.4,5-4.4,7.9c0,2.4,2,4.4,4.4,4.4c2.4,0,4.4-2,4.4-4.4
C92.1,89.3,89.6,84.3,87.7,84.3z"/>
<path fill="#E44125" d="M120,101.6V84.2c0-7.8-5.5-14.3-12.9-15.6c-1.9-6.5-7.8-11.1-14.6-11.3c0.2-0.6,0.4-1.3,0.4-2
c0-2.9-2.3-5.3-5.2-5.3c-2.9,0-5.2,2.4-5.2,5.3c0,0.7,0.1,1.4,0.4,2C76,57.6,70,62.1,68.1,68.5C60.2,69.4,54,76.1,54,84.2v17.4
c0,8.4,7,15.2,15,15.8v4.6h-6.7c-3.1,0-3.3,2.8-3.3,3.5v7.4c0,1,0.8,2.2,1.9,2.2h54c1,0,2.1-1.1,2.1-2.2v-7.4
c0-1.4-1.2-3.5-3.9-3.5H107v-4.7C115,116.2,120,109.6,120,101.6z M87.7,53.6c1,0,1.8,0.8,1.8,1.8s-0.8,1.8-1.8,1.8S86,56.4,86,55.4
S86.8,53.6,87.7,53.6z M83.3,61h8.8c4.9,0,9.3,3,11.2,7H72.1C74,64,78.3,61,83.3,61z M58,101.6V84.2c0-6.3,4.8-11.6,11-12.1
c0.1,0,36.4,0,36.8,0c0,0,0.2,0,0.2,0c6.1,0.7,10,5.8,10,12.1v17.4c0,6.7-4.8,12.4-11.5,12.4H98v-7.8c0-2-1.2-3.2-3.3-3.2H90v-8.8
c0-1-1-1.8-2-1.8s-2,0.8-2,1.8v8.8h-5.3c-1.9,0-3.7,1.2-3.7,3.2v7.8h-7C63.2,114,58,108.3,58,101.6z M80.1,114l0-7.5l14.9-0.1v7.6
H80.1z M113,131H63v-5h50V131z M73,122v-4h30v4H73z"/>
<path fill="#E44125" d="M63,103.4c-1,0-2-0.8-2-1.8v-6.1c0-1,1-1.8,2-1.8s2,0.8,2,1.8v6.1C65,102.5,64,103.4,63,103.4z"/>
<path fill="#E44125" d="M63,91.1c-1,0-2-0.8-2-1.8v-4.1c0-5.3,4.5-9.4,10-9.4c1,0,2,0.8,2,1.8s-0.8,1.8-1.9,1.8
c-3.4,0-6.1,2.5-6.1,5.8v4.1C65,90.3,64,91.1,63,91.1z"/>
</g>
<g id="toiletpaper">
<g id="paper">
<path fill="#E44125" d="M243.7,59H191c-1,0-1.8,0.5-1.8,1.5s0.8,1.5,1.8,1.5h40v1.8c0,1,1,1.8,2,1.8s2-0.8,2-1.8V62h7v55.5l-7,0
v-5.9c0-1-1-1.8-2-1.8s-2,0.8-2,1.8v5.9l-12.1,0.1c-1,0-1.7,0.9-1.7,1.9c0,1,1.9,1.6,1.9,1.6l24.5,0c1.6,0,2.4-1.9,2.4-3.4V61.3
C246,60.7,245.5,59,243.7,59z"/>
<path fill="#E44125" d="M233,79.1c1,0,2-0.8,2-1.8v-4.9c0-1-1-1.8-2-1.8s-2,0.8-2,1.8v4.9C231,78.3,232,79.1,233,79.1z"/>
<path fill="#E44125" d="M231,90.8c0,1,1,1.8,2,1.8s2-0.8,2-1.8v-6.1c0-1-1-1.8-2-1.8s-2,0.8-2,1.8V90.8z"/>
<path fill="#E44125" d="M231,103.1c0,1,1,1.8,2,1.8s2-0.8,2-1.8v-4.9c0-1-1-1.8-2-1.8s-2,0.8-2,1.8V103.1z"/>
</g>
<path fill="#FFFFFF" d="M220,68v58c0,0-9.5,10.5-30.1,9.9c-19.2-0.6-29.9-9.9-29.9-9.9l-23.3-68c0,0,28.8,0.1,54.3,1.1
S220,68,220,68z"/>
<g>
<g>
<g>
<path fill="#FDFDF8" d="M191.6,62.2l-0.1,2.6c-0.3,0-0.5,0-0.8,0c-9,0-9.7,2.7-9.7,3.5c0,0.8,0.7,3.5,9.7,3.5c0.3,0,0.6,0,0.8,0
l0,2.6c-0.3,0-0.6,0-0.9,0c-17,0.1-26.3-4.1-26.3-6.1c0-2.1,9.3-6.5,26.3-6.1C191.1,62.2,191.4,62.2,191.6,62.2z"/>
<path fill="#FDFDF8" d="M191.6,62.2c26.5,0.7,24.9,6.1,24.9,6.1c-0.1,1.7-7.1,5.9-24.9,6.1l0-2.6c8.2-0.2,8.9-2.7,8.9-3.5
c0-0.8-0.7-3.3-8.9-3.5L191.6,62.2z"/>
<path fill="#E44125" d="M220,68.4c0,0.3,0,56.7,0,56.9c0,8-15.2,12.4-29.6,12.3c-21.7-0.3-29.4-7.5-30.4-11.9V67.9
c0-4.4,13.1-9.2,30.4-9.2C210.8,58.7,220,63.7,220,68.4z M216.5,68.3c0,0,1.6-5.4-24.9-6.1c-0.3,0-0.6,0-0.9,0
c-17-0.4-26.3,4-26.3,6.1c0,2.1,9.3,6.2,26.3,6.1c0.3,0,0.6,0,0.9,0C209.5,74.3,216.4,70.1,216.5,68.3z M216,125.6V73.3
c-5,2.7-12.2,4.7-25.2,4.7c-5.7,0-10.8-0.4-14.8-1.1v3.3c0,1-0.5,1.8-1.5,1.8s-1.5-0.8-1.5-1.8v-4c-4-0.9-7-2.1-9-3.4v51.3
c0,0,0,4.8,9,7.4v-3.3c0-1,0.5-1.8,1.5-1.8s1.5,0.8,1.5,1.8v4.4c4,1,9.3,1.6,14.8,1.6C212.8,133.9,216,125.8,216,125.6z"/>
<path fill="#FDFDF8" d="M216,73.3v52.3c0,0.2-3.2,8.3-25.2,8.4c-5.5,0-10.8-0.6-14.8-1.6v-4.4c0-1-0.5-1.8-1.5-1.8
s-1.5,0.8-1.5,1.8v3.3c-9-2.6-9-7.4-9-7.4V72.8c2,1.3,5,2.5,9,3.4v4c0,1,0.5,1.8,1.5,1.8s1.5-0.8,1.5-1.8v-3.3
c4,0.7,9.1,1.1,14.8,1.1C203.8,78,211,76,216,73.3z M176,119.5v-4.9c0-1-0.5-1.8-1.5-1.8s-1.5,0.8-1.5,1.8v4.9
c0,1,0.5,1.8,1.5,1.8S176,120.5,176,119.5z M176,107.2v-6.1c0-1-0.5-1.8-1.5-1.8s-1.5,0.8-1.5,1.8v6.1c0,1,0.5,1.8,1.5,1.8
S176,108.2,176,107.2z M176,93.7v-4.9c0-1-0.5-1.8-1.5-1.8s-1.5,0.8-1.5,1.8v4.9c0,1,0.5,1.8,1.5,1.8S176,94.7,176,93.7z"/>
<path fill="#E44125" d="M191.6,64.9c8.2,0.2,8.9,2.7,8.9,3.5c0,0.8-0.7,3.3-8.9,3.5c-0.3,0-0.5,0-0.8,0c-9,0-9.7-2.7-9.7-3.5
c0-0.8,0.7-3.5,9.7-3.5C191,64.9,191.3,64.9,191.6,64.9z"/>
<path fill="#E44125" d="M176,114.6v4.9c0,1-0.5,1.8-1.5,1.8s-1.5-0.8-1.5-1.8v-4.9c0-1,0.5-1.8,1.5-1.8S176,113.6,176,114.6z"/>
<path fill="#E44125" d="M176,101.1v6.1c0,1-0.5,1.8-1.5,1.8s-1.5-0.8-1.5-1.8v-6.1c0-1,0.5-1.8,1.5-1.8S176,100.1,176,101.1z"/>
<path fill="#E44125" d="M176,88.8v4.9c0,1-0.5,1.8-1.5,1.8s-1.5-0.8-1.5-1.8v-4.9c0-1,0.5-1.8,1.5-1.8S176,87.8,176,88.8z"/>
</g>
<g>
</g>
</g>
</g>
</g>
<g id="axe">
<path fill="#E44125" d="M281,126.4c-2.1,2-2.1,5.4,0,7.4c1,1,2.4,1.5,3.7,1.5c1.3,0,2.7-0.5,3.7-1.5c2.1-2,2.1-5.4,0-7.4
C286.4,124.4,283.1,124.4,281,126.4z M286,131.4c-0.7,0.7-1.8,0.7-2.5,0c-0.7-0.7-0.7-1.8,0-2.5c0.3-0.3,0.8-0.5,1.2-0.5
c0.4,0,0.9,0.2,1.2,0.5C286.7,129.6,286.7,130.7,286,131.4z"/>
<path fill="#E44125" d="M357.4,90.9l-7.4-7.4c0,0,0,0,0,0l-8.1-8.1l3.1-3.1c1.4-1.4,1.4-3.6,0-5l-9.9-9.9c-1.4-1.4-3.6-1.4-5,0
l-3.1,3.1l-0.6-0.6c-1.3-1.3-3.6-1.3-5,0l-16.7,16.7c-0.7,0.7-1,1.5-1,2.5c0,0.9,0.4,1.8,1,2.5l0.7,0.7l-29.3,28.9
c-2.3,2.3-2.7,5.1-2.7,6.6l0,12.3c0,5.9,4.5,10.7,10.4,10.7c11,0,11.4-9.3,11.4-9.3l0-8.5l24.5-25.2l8,19.2c0.3,0.7,1,1.1,1.7,1.1
c0.2,0,0.3,0,0.5-0.1c0.4-0.1,10.8-3.1,18.5-10.8c7-7,9.2-14.3,9.3-14.6C358,92.1,357.8,91.4,357.4,90.9z M332.6,60l9.9,9.9
l-3.1,3.1l-9.9-9.9L332.6,60z M317.8,94.8l-1.2,1.3l-9.8-9.8L308,85L317.8,94.8z M292.3,121c-0.3,0.3-0.3,0.8-0.3,1.3v6.8
c0,0,0.6,8.1-7.7,8.1c-3.8,0-7-3.1-7-7l0-12.3c0-0.7,0.1-2.6,1.5-4l5-4.9l3.6,3.6c0.8,0.8,1.9,1.3,3.1,1.3c1.2,0,2.3-0.5,3.1-1.3
c1.7-1.7,1.7-4.5,0-6.2c-0.7-0.7-1.8-0.7-2.5,0c-0.7,0.7-0.7,1.8,0,2.5c0.3,0.3,0.3,0.9,0,1.2c-0.2,0.2-0.5,0.3-0.6,0.3
s-0.4,0-0.6-0.3l-3.6-3.6l18.1-17.9l9.9,9.9l-2.7,3.1l-3.5-3.9c0,0,0,0,0,0c-3-1.7-4.9-1.7-6.6,0c-0.8,0.8-1.5,1.9-1.5,3.1
c0,1.2,0.4,2.3,1.2,3.1c0.3,0.3,0.3,0.9,0,1.2c-0.3,0.3-0.9,0.3-1.3,0c-0.7-0.7-1.8-0.7-2.5,0c-0.7,0.7-0.7,1.8,0,2.5
c0.9,0.9,2,1.3,3.1,1.3c1.1,0,2.2-0.4,3.1-1.3c1.7-1.7,1.7-4.5,0-6.2c-0.2-0.2-0.3-0.5-0.3-0.6c0-0.1,0-0.4,0.3-0.6
c0.2-0.2,0.5-0.4,0.6-0.4c0.2,0,0.5,0.1,0.6,0.1c0,0,0,0,0,0l4,4L292.3,121z M307.2,79.2l16.7-16.7l22.7,22.7
c-1.1,2.3-3.9,8.1-7.5,11.7c-4,4-9.6,7-12.3,8.4l-4.4-10.6C322.4,94.5,307.2,79.2,307.2,79.2z M346,104.8
c-5.4,5.4-12.5,8.3-15.5,9.4l-2.4-5.7c2.8-1.4,9-4.7,13.4-9.1c3.5-3.5,6.2-8.6,7.7-11.5l4.9,4.9C353.3,94.7,351,99.8,346,104.8z"/>
</g>
</svg>
</div>
CSS
body{background-color:#FDFDF8}
div{
width:800px;
height:600px;
}
JS
var animateIcons = new TimelineMax({repeat:-1})
animateIcons.to($('#lanternflame'),.5,{scale:0,transformOrigin:'50% 100%',ease:Power2.easeOut})
.to($('#lanternflame'),.5,{scale:1,transformOrigin:'50% 100%',ease:Power2.easeOut})
.to($('#paper'),.25,{x:'-=50'})
.to($('#paper'),.25,{x:'+=50'})
.to($('#axe'),.25,{rotation:30,transformOrigin:'30% 100%'})
.to($('#axe'),.25,{rotation:0,transformOrigin:'30% 100%'})
.to($('#dial'),.5,{rotation:360,transformOrigin:'50% 50%',ease:Bounce.easeInOut})
.to($('#knifeblade'),.25,{rotation:88,transformOrigin:'53% 100%'})
.to($('#knifeblade'),.25,{rotation:0,transformOrigin:'53% 100%'},'+=.25')
.to($('#zippocap'),.25,{rotation:90,transformOrigin:'100% 100%'})
.from($('#flame'),.5,{scale:0,transformOrigin:'50% 100%',ease:Bounce.easeOut})
.to($('#zippocap'),.25,{rotation:0,transformOrigin:'100% 100%'})
jsfiddle 没有 jQuery 作为外部资源包含在内,添加它可以解决您的问题。
在 JsFiddle 的左侧,单击外部资源,您应该会看到一个空列表。然后,您可以添加代码笔示例具有的以下 2 个外部资源:
//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js
您可以通过单击 设置 然后 Javascript.
查看 codepen 中的依赖项
This 分叉了您的代码之一。
您忘记导入 jquery 库和 Tweenmax 库。它们需要在 <HTML>
中导入。
//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js
为什么 SVG 动画在 this original CodePen, but not in my copy on JSFiddle 中有效? 我应该调用 JS 库吗?
Original:
HTML
<div>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" viewBox="0 0 400 300" enable-background="new 0 0 400 300" xml:space="preserve">
<defs>
</defs>
<rect fill="#FDFDF8" width="400" height="300"/>
<g id="pocketknife">
<path fill="#E44125" d="M181.9,211H198h17.2h16.7c9.9,0,18.1,7.8,18.1,17.3v6.3c0,1-1,1.8-2,1.8s-2-0.8-2-1.8v-6.3
c0-7.5-6.3-13.3-14.1-13.3h-16.7H198h-16.1c-7.8,0-12.9,5.6-12.9,13.3v6.3c0,1-1,1.8-2,1.8s-2-0.8-2-1.8v-6.3
C165,218.6,172.2,211,181.9,211z"/>
<g id="knifeblade">
<g>
<path fill="#FDFDF8" d="M167,234v-39.6c9-3.9,13.2-11.9,13.2-21.2c0-1.1-0.1-2.2-0.2-3.2c0.9-0.2,2.1-0.3,3.1-0.3
c8.7,0,16,7.1,16,15.8V218"/>
<path fill="#E44125" d="M167,236.2c1,0,2-0.8,2-1.8v-38.8c8-4.2,13.1-12.5,13.1-22.3c0-0.6-0.1-1.1-0.1-1.6c0.3,0,0.7,0,1,0
c7.7,0,14,6.2,14,13.9v32.9c0,1,0.5,1.8,1.5,1.8s1.5-0.8,1.5-1.8v-32.9c0-9.7-7.7-17.6-17.4-17.6c-1,0-2.1,0.1-3.1,0.3
c-1,0.2-1.6,1.1-1.4,2.1c0.1,0.9,0.2,1.9,0.2,2.9c0,8.9-4.5,16.2-12.1,19.6c-0.7,0.3-1,1-1,1.7v39.9
C165,235.4,166,236.2,167,236.2z"/>
</g>
<path fill="#E44125" d="M172.3,224.6c1,0,1.8-0.8,1.8-1.8v-20.7c0-1-0.8-1.8-1.8-1.8s-1.8,0.8-1.8,1.8v20.7
C170.5,223.8,171.3,224.6,172.3,224.6z"/>
</g>
<path fill="none" stroke="#E44125" stroke-width="3.5043" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M167,228.3"/>
<path fill="#FDFDF8" d="M246,233.9c0-7.7-6.2-13.9-13.9-13.9h-49.1c-7.7,0-13.9,6.2-13.9,13.9v0.1c0,7.7,6.2,13.9,13.9,13.9h49.1
c7.7,0,13.9-6.2,13.9-13.9V233.9z"/>
<path fill="#E44125" d="M227.5,233.6c0-2.9,2.4-5.3,5.3-5.3s5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3S227.5,236.5,227.5,233.6z
M231,233.6c0,1,0.8,1.8,1.8,1.8c1,0,1.8-0.8,1.8-1.8c0-1-0.8-1.8-1.8-1.8C231.8,231.8,231,232.6,231,233.6z"/>
<path fill="#E44125" d="M250,234.4c0,9.7-7.9,17.6-17.6,17.6h-49.8c-9.7,0-17.6-7.9-17.6-17.6v-0.8c0-9.7,7.9-17.6,17.6-17.6h49.8
c9.7,0,17.6,7.9,17.6,17.6V234.4z M246,233.9c0-7.7-6.2-13.9-13.9-13.9h-49.1c-7.7,0-13.9,6.2-13.9,13.9v0.1
c0,7.7,6.2,13.9,13.9,13.9h49.1c7.7,0,13.9-6.2,13.9-13.9V233.9z"/>
</g>
<g id="compass_1_">
<path id="dial" fill="#E44125" d="M105.1,232l-10.9-10.9c0.3-0.7,0.5-1.5,0.5-2.3c0-1.4-0.5-2.7-1.5-3.7c-1.6-1.6-4-1.9-6-1
l-10.9-10.9c-0.7-0.7-1.8-0.7-2.5,0c-0.7,0.7-0.7,1.8,0,2.5l10.9,10.9c-0.3,0.7-0.5,1.5-0.5,2.3c0,1.4,0.5,2.7,1.5,3.7
c1,1,2.3,1.5,3.7,1.5c0.8,0,1.6-0.2,2.3-0.5l10.9,10.9c0.3,0.3,0.8,0.5,1.2,0.5c0.4,0,0.9-0.2,1.2-0.5
C105.8,233.8,105.8,232.7,105.1,232z M88.2,220.1L88.2,220.1c-0.3-0.3-0.5-0.8-0.5-1.2c0-0.5,0.2-0.9,0.5-1.2
c0.3-0.3,0.8-0.5,1.2-0.5c0.4,0,0.9,0.2,1.2,0.5c0.3,0.3,0.5,0.8,0.5,1.2c0,0.5-0.2,0.9-0.5,1.2C90.1,220.8,88.9,220.8,88.2,220.1z
"/>
<path fill="#E44125" d="M89.5,254.8c-19.8,0-35.9-16.1-35.9-35.9c0-19.8,16.1-35.9,35.9-35.9s35.9,16.1,35.9,35.9
C125.4,238.7,109.3,254.8,89.5,254.8z M89.5,186.4c-17.9,0-32.4,14.5-32.4,32.4s14.5,32.4,32.4,32.4s32.4-14.5,32.4-32.4
S107.4,186.4,89.5,186.4z"/>
<path id="stopper_1_" fill="#E44125" d="M94.8,175.9c0-2.9-2.4-5.3-5.3-5.3s-5.4,2.4-5.4,5.3c0,2.1,0.9,3.9,2.9,4.7v3.6
c0,1,1,1.8,2,1.8s2-0.8,2-1.8V181C93,180.3,94.8,178.3,94.8,175.9z M89.8,177.7c-0.2-0.1-0.4-0.1-0.7-0.1c-0.1,0-0.2,0-0.3,0
c-0.6-0.3-1.1-0.9-1.1-1.6c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8C91.2,176.8,90.6,177.5,89.8,177.7z"/>
<path fill="#E44125" d="M89.5,189.1c-16.4,0-29.8,13.4-29.8,29.8s13.4,29.8,29.8,29.8s29.8-13.4,29.8-29.8S105.9,189.1,89.5,189.1z
M91,245.1v-4.3c0-1-1-1.8-2-1.8s-2,0.8-2,1.8v4.3c-12-1.1-22.6-11-23.7-24h4.3c1,0,1.8-1,1.8-2s-0.8-2-1.8-2h-4.3
C64,204,74,193.8,87,192.7v5.1c0,1,1,1.8,2,1.8s2-0.8,2-1.8v-5.1c13,0.7,24,11.4,24.7,24.4h-5.1c-1,0-1.8,1-1.8,2s0.8,2,1.8,2h5.1
C114.6,234,104,244.4,91,245.1z"/>
</g>
<g id="zippo">
<path id="flame" fill="#E44125" d="M304.7,182.5c-4.6,0-7.5,7.1-7.5,10.9c0,4.2,3.4,7.5,7.5,7.5c4.2,0,7.5-3.4,7.5-7.5
C312.2,189.6,309.3,182.5,304.7,182.5z M304.7,197.6c-2.3,0-4.2-1.9-4.2-4.2c0-2.8,2.4-7.5,4.2-7.5s4.2,4.7,4.2,7.5
C308.9,195.7,307,197.6,304.7,197.6z"/>
<g>
<path fill="#E44125" d="M325.5,213H318v-10.1c0-3-2.2-4.9-5.1-4.9h-15.8c-2.5,0-4.4,1.5-5,3.7c-0.6-0.3-1.3-0.5-2-0.5
c-2.9,0-5.3,2.3-5.3,5.2c0,2.9,2.3,5.2,5.2,5.2c0.7,0,0.9-0.1,1.9-0.4v1.7h-9c0,0-3-0.2-3,2.7c0,3.4,0,19.6,0,19.6
c0,8.9,6.9,16.7,15.4,16.7h17.5c8.6,0,16.1-7.7,16.1-16.7c0,0,0-16.4,0-19.5C329,212.7,325.5,213,325.5,213z M290.2,208.2
c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8c1,0,1.8,0.8,1.8,1.8C291.9,207.4,291.1,208.2,290.2,208.2z M296,202.9
c0-0.9,0.2-1.9,1.2-1.9h15.8c0.4,0,1.1,0.5,1.1,1.9V213h-18V202.9z M312.9,248h-17.5c-6.5,0-11.4-5.7-11.4-12.7V217h41v18.3
C325,242.3,319.6,248,312.9,248z"/>
<path fill="#E44125" d="M309.2,205h-8.6c-1,0-1.8,1-1.8,2s0.8,2,1.8,2h8.6c1,0,1.8-1,1.8-2S310.2,205,309.2,205z"/>
</g>
<g id="zippocap">
<path fill="#FDFDF8" d="M325.5,214.4H283v-19.9c0,0-1.2-10.4,21.1-10.6s21.4,10.6,21.4,10.6V214.4z"/>
<path fill="#E44125" d="M329,198.1v16.6c0,1.1-0.9,2.3-2,2.3h-44.6c-1.1,0-2.5-1.3-2.5-2.3v-16.6c0-9.4,7.8-16.1,17.2-16.1h15
C321.5,182,329,188.8,329,198.1z M325,213v-14.9c0-7.2-5.6-12.1-12.8-12.1h-15c-7.2,0-13.2,4.8-13.2,12.1V213H325z"/>
</g>
</g>
<g id="lantern">
<path id="lanternflame" fill="#E44125" d="M87.7,100.1c-4.3,0-7.9-3.5-7.9-7.9c0-3.9,3.1-11.4,7.9-11.4c4.8,0,7.9,7.5,7.9,11.4
C95.6,96.5,92.1,100.1,87.7,100.1z M87.7,84.3c-1.9,0-4.4,5-4.4,7.9c0,2.4,2,4.4,4.4,4.4c2.4,0,4.4-2,4.4-4.4
C92.1,89.3,89.6,84.3,87.7,84.3z"/>
<path fill="#E44125" d="M120,101.6V84.2c0-7.8-5.5-14.3-12.9-15.6c-1.9-6.5-7.8-11.1-14.6-11.3c0.2-0.6,0.4-1.3,0.4-2
c0-2.9-2.3-5.3-5.2-5.3c-2.9,0-5.2,2.4-5.2,5.3c0,0.7,0.1,1.4,0.4,2C76,57.6,70,62.1,68.1,68.5C60.2,69.4,54,76.1,54,84.2v17.4
c0,8.4,7,15.2,15,15.8v4.6h-6.7c-3.1,0-3.3,2.8-3.3,3.5v7.4c0,1,0.8,2.2,1.9,2.2h54c1,0,2.1-1.1,2.1-2.2v-7.4
c0-1.4-1.2-3.5-3.9-3.5H107v-4.7C115,116.2,120,109.6,120,101.6z M87.7,53.6c1,0,1.8,0.8,1.8,1.8s-0.8,1.8-1.8,1.8S86,56.4,86,55.4
S86.8,53.6,87.7,53.6z M83.3,61h8.8c4.9,0,9.3,3,11.2,7H72.1C74,64,78.3,61,83.3,61z M58,101.6V84.2c0-6.3,4.8-11.6,11-12.1
c0.1,0,36.4,0,36.8,0c0,0,0.2,0,0.2,0c6.1,0.7,10,5.8,10,12.1v17.4c0,6.7-4.8,12.4-11.5,12.4H98v-7.8c0-2-1.2-3.2-3.3-3.2H90v-8.8
c0-1-1-1.8-2-1.8s-2,0.8-2,1.8v8.8h-5.3c-1.9,0-3.7,1.2-3.7,3.2v7.8h-7C63.2,114,58,108.3,58,101.6z M80.1,114l0-7.5l14.9-0.1v7.6
H80.1z M113,131H63v-5h50V131z M73,122v-4h30v4H73z"/>
<path fill="#E44125" d="M63,103.4c-1,0-2-0.8-2-1.8v-6.1c0-1,1-1.8,2-1.8s2,0.8,2,1.8v6.1C65,102.5,64,103.4,63,103.4z"/>
<path fill="#E44125" d="M63,91.1c-1,0-2-0.8-2-1.8v-4.1c0-5.3,4.5-9.4,10-9.4c1,0,2,0.8,2,1.8s-0.8,1.8-1.9,1.8
c-3.4,0-6.1,2.5-6.1,5.8v4.1C65,90.3,64,91.1,63,91.1z"/>
</g>
<g id="toiletpaper">
<g id="paper">
<path fill="#E44125" d="M243.7,59H191c-1,0-1.8,0.5-1.8,1.5s0.8,1.5,1.8,1.5h40v1.8c0,1,1,1.8,2,1.8s2-0.8,2-1.8V62h7v55.5l-7,0
v-5.9c0-1-1-1.8-2-1.8s-2,0.8-2,1.8v5.9l-12.1,0.1c-1,0-1.7,0.9-1.7,1.9c0,1,1.9,1.6,1.9,1.6l24.5,0c1.6,0,2.4-1.9,2.4-3.4V61.3
C246,60.7,245.5,59,243.7,59z"/>
<path fill="#E44125" d="M233,79.1c1,0,2-0.8,2-1.8v-4.9c0-1-1-1.8-2-1.8s-2,0.8-2,1.8v4.9C231,78.3,232,79.1,233,79.1z"/>
<path fill="#E44125" d="M231,90.8c0,1,1,1.8,2,1.8s2-0.8,2-1.8v-6.1c0-1-1-1.8-2-1.8s-2,0.8-2,1.8V90.8z"/>
<path fill="#E44125" d="M231,103.1c0,1,1,1.8,2,1.8s2-0.8,2-1.8v-4.9c0-1-1-1.8-2-1.8s-2,0.8-2,1.8V103.1z"/>
</g>
<path fill="#FFFFFF" d="M220,68v58c0,0-9.5,10.5-30.1,9.9c-19.2-0.6-29.9-9.9-29.9-9.9l-23.3-68c0,0,28.8,0.1,54.3,1.1
S220,68,220,68z"/>
<g>
<g>
<g>
<path fill="#FDFDF8" d="M191.6,62.2l-0.1,2.6c-0.3,0-0.5,0-0.8,0c-9,0-9.7,2.7-9.7,3.5c0,0.8,0.7,3.5,9.7,3.5c0.3,0,0.6,0,0.8,0
l0,2.6c-0.3,0-0.6,0-0.9,0c-17,0.1-26.3-4.1-26.3-6.1c0-2.1,9.3-6.5,26.3-6.1C191.1,62.2,191.4,62.2,191.6,62.2z"/>
<path fill="#FDFDF8" d="M191.6,62.2c26.5,0.7,24.9,6.1,24.9,6.1c-0.1,1.7-7.1,5.9-24.9,6.1l0-2.6c8.2-0.2,8.9-2.7,8.9-3.5
c0-0.8-0.7-3.3-8.9-3.5L191.6,62.2z"/>
<path fill="#E44125" d="M220,68.4c0,0.3,0,56.7,0,56.9c0,8-15.2,12.4-29.6,12.3c-21.7-0.3-29.4-7.5-30.4-11.9V67.9
c0-4.4,13.1-9.2,30.4-9.2C210.8,58.7,220,63.7,220,68.4z M216.5,68.3c0,0,1.6-5.4-24.9-6.1c-0.3,0-0.6,0-0.9,0
c-17-0.4-26.3,4-26.3,6.1c0,2.1,9.3,6.2,26.3,6.1c0.3,0,0.6,0,0.9,0C209.5,74.3,216.4,70.1,216.5,68.3z M216,125.6V73.3
c-5,2.7-12.2,4.7-25.2,4.7c-5.7,0-10.8-0.4-14.8-1.1v3.3c0,1-0.5,1.8-1.5,1.8s-1.5-0.8-1.5-1.8v-4c-4-0.9-7-2.1-9-3.4v51.3
c0,0,0,4.8,9,7.4v-3.3c0-1,0.5-1.8,1.5-1.8s1.5,0.8,1.5,1.8v4.4c4,1,9.3,1.6,14.8,1.6C212.8,133.9,216,125.8,216,125.6z"/>
<path fill="#FDFDF8" d="M216,73.3v52.3c0,0.2-3.2,8.3-25.2,8.4c-5.5,0-10.8-0.6-14.8-1.6v-4.4c0-1-0.5-1.8-1.5-1.8
s-1.5,0.8-1.5,1.8v3.3c-9-2.6-9-7.4-9-7.4V72.8c2,1.3,5,2.5,9,3.4v4c0,1,0.5,1.8,1.5,1.8s1.5-0.8,1.5-1.8v-3.3
c4,0.7,9.1,1.1,14.8,1.1C203.8,78,211,76,216,73.3z M176,119.5v-4.9c0-1-0.5-1.8-1.5-1.8s-1.5,0.8-1.5,1.8v4.9
c0,1,0.5,1.8,1.5,1.8S176,120.5,176,119.5z M176,107.2v-6.1c0-1-0.5-1.8-1.5-1.8s-1.5,0.8-1.5,1.8v6.1c0,1,0.5,1.8,1.5,1.8
S176,108.2,176,107.2z M176,93.7v-4.9c0-1-0.5-1.8-1.5-1.8s-1.5,0.8-1.5,1.8v4.9c0,1,0.5,1.8,1.5,1.8S176,94.7,176,93.7z"/>
<path fill="#E44125" d="M191.6,64.9c8.2,0.2,8.9,2.7,8.9,3.5c0,0.8-0.7,3.3-8.9,3.5c-0.3,0-0.5,0-0.8,0c-9,0-9.7-2.7-9.7-3.5
c0-0.8,0.7-3.5,9.7-3.5C191,64.9,191.3,64.9,191.6,64.9z"/>
<path fill="#E44125" d="M176,114.6v4.9c0,1-0.5,1.8-1.5,1.8s-1.5-0.8-1.5-1.8v-4.9c0-1,0.5-1.8,1.5-1.8S176,113.6,176,114.6z"/>
<path fill="#E44125" d="M176,101.1v6.1c0,1-0.5,1.8-1.5,1.8s-1.5-0.8-1.5-1.8v-6.1c0-1,0.5-1.8,1.5-1.8S176,100.1,176,101.1z"/>
<path fill="#E44125" d="M176,88.8v4.9c0,1-0.5,1.8-1.5,1.8s-1.5-0.8-1.5-1.8v-4.9c0-1,0.5-1.8,1.5-1.8S176,87.8,176,88.8z"/>
</g>
<g>
</g>
</g>
</g>
</g>
<g id="axe">
<path fill="#E44125" d="M281,126.4c-2.1,2-2.1,5.4,0,7.4c1,1,2.4,1.5,3.7,1.5c1.3,0,2.7-0.5,3.7-1.5c2.1-2,2.1-5.4,0-7.4
C286.4,124.4,283.1,124.4,281,126.4z M286,131.4c-0.7,0.7-1.8,0.7-2.5,0c-0.7-0.7-0.7-1.8,0-2.5c0.3-0.3,0.8-0.5,1.2-0.5
c0.4,0,0.9,0.2,1.2,0.5C286.7,129.6,286.7,130.7,286,131.4z"/>
<path fill="#E44125" d="M357.4,90.9l-7.4-7.4c0,0,0,0,0,0l-8.1-8.1l3.1-3.1c1.4-1.4,1.4-3.6,0-5l-9.9-9.9c-1.4-1.4-3.6-1.4-5,0
l-3.1,3.1l-0.6-0.6c-1.3-1.3-3.6-1.3-5,0l-16.7,16.7c-0.7,0.7-1,1.5-1,2.5c0,0.9,0.4,1.8,1,2.5l0.7,0.7l-29.3,28.9
c-2.3,2.3-2.7,5.1-2.7,6.6l0,12.3c0,5.9,4.5,10.7,10.4,10.7c11,0,11.4-9.3,11.4-9.3l0-8.5l24.5-25.2l8,19.2c0.3,0.7,1,1.1,1.7,1.1
c0.2,0,0.3,0,0.5-0.1c0.4-0.1,10.8-3.1,18.5-10.8c7-7,9.2-14.3,9.3-14.6C358,92.1,357.8,91.4,357.4,90.9z M332.6,60l9.9,9.9
l-3.1,3.1l-9.9-9.9L332.6,60z M317.8,94.8l-1.2,1.3l-9.8-9.8L308,85L317.8,94.8z M292.3,121c-0.3,0.3-0.3,0.8-0.3,1.3v6.8
c0,0,0.6,8.1-7.7,8.1c-3.8,0-7-3.1-7-7l0-12.3c0-0.7,0.1-2.6,1.5-4l5-4.9l3.6,3.6c0.8,0.8,1.9,1.3,3.1,1.3c1.2,0,2.3-0.5,3.1-1.3
c1.7-1.7,1.7-4.5,0-6.2c-0.7-0.7-1.8-0.7-2.5,0c-0.7,0.7-0.7,1.8,0,2.5c0.3,0.3,0.3,0.9,0,1.2c-0.2,0.2-0.5,0.3-0.6,0.3
s-0.4,0-0.6-0.3l-3.6-3.6l18.1-17.9l9.9,9.9l-2.7,3.1l-3.5-3.9c0,0,0,0,0,0c-3-1.7-4.9-1.7-6.6,0c-0.8,0.8-1.5,1.9-1.5,3.1
c0,1.2,0.4,2.3,1.2,3.1c0.3,0.3,0.3,0.9,0,1.2c-0.3,0.3-0.9,0.3-1.3,0c-0.7-0.7-1.8-0.7-2.5,0c-0.7,0.7-0.7,1.8,0,2.5
c0.9,0.9,2,1.3,3.1,1.3c1.1,0,2.2-0.4,3.1-1.3c1.7-1.7,1.7-4.5,0-6.2c-0.2-0.2-0.3-0.5-0.3-0.6c0-0.1,0-0.4,0.3-0.6
c0.2-0.2,0.5-0.4,0.6-0.4c0.2,0,0.5,0.1,0.6,0.1c0,0,0,0,0,0l4,4L292.3,121z M307.2,79.2l16.7-16.7l22.7,22.7
c-1.1,2.3-3.9,8.1-7.5,11.7c-4,4-9.6,7-12.3,8.4l-4.4-10.6C322.4,94.5,307.2,79.2,307.2,79.2z M346,104.8
c-5.4,5.4-12.5,8.3-15.5,9.4l-2.4-5.7c2.8-1.4,9-4.7,13.4-9.1c3.5-3.5,6.2-8.6,7.7-11.5l4.9,4.9C353.3,94.7,351,99.8,346,104.8z"/>
</g>
</svg>
</div>
CSS
body{background-color:#FDFDF8}
div{
width:800px;
height:600px;
}
JS
var animateIcons = new TimelineMax({repeat:-1})
animateIcons.to($('#lanternflame'),.5,{scale:0,transformOrigin:'50% 100%',ease:Power2.easeOut})
.to($('#lanternflame'),.5,{scale:1,transformOrigin:'50% 100%',ease:Power2.easeOut})
.to($('#paper'),.25,{x:'-=50'})
.to($('#paper'),.25,{x:'+=50'})
.to($('#axe'),.25,{rotation:30,transformOrigin:'30% 100%'})
.to($('#axe'),.25,{rotation:0,transformOrigin:'30% 100%'})
.to($('#dial'),.5,{rotation:360,transformOrigin:'50% 50%',ease:Bounce.easeInOut})
.to($('#knifeblade'),.25,{rotation:88,transformOrigin:'53% 100%'})
.to($('#knifeblade'),.25,{rotation:0,transformOrigin:'53% 100%'},'+=.25')
.to($('#zippocap'),.25,{rotation:90,transformOrigin:'100% 100%'})
.from($('#flame'),.5,{scale:0,transformOrigin:'50% 100%',ease:Bounce.easeOut})
.to($('#zippocap'),.25,{rotation:0,transformOrigin:'100% 100%'})
Mine
HTML
<div>
<h3>
D'aprés David McFeders <br>
Depuis : codepen.io <br>
<a href="https://codepen.io/iconjunkie/pen/PZxZKE">lien </a>
</h3>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" viewBox="0 0 400 300" enable-background="new 0 0 400 300" xml:space="preserve">
<defs>
</defs>
<rect fill="#FDFDF8" width="400" height="300"/>
<g id="pocketknife">
<path fill="#E44125" d="M181.9,211H198h17.2h16.7c9.9,0,18.1,7.8,18.1,17.3v6.3c0,1-1,1.8-2,1.8s-2-0.8-2-1.8v-6.3
c0-7.5-6.3-13.3-14.1-13.3h-16.7H198h-16.1c-7.8,0-12.9,5.6-12.9,13.3v6.3c0,1-1,1.8-2,1.8s-2-0.8-2-1.8v-6.3
C165,218.6,172.2,211,181.9,211z"/>
<g id="knifeblade">
<g>
<path fill="#FDFDF8" d="M167,234v-39.6c9-3.9,13.2-11.9,13.2-21.2c0-1.1-0.1-2.2-0.2-3.2c0.9-0.2,2.1-0.3,3.1-0.3
c8.7,0,16,7.1,16,15.8V218"/>
<path fill="#E44125" d="M167,236.2c1,0,2-0.8,2-1.8v-38.8c8-4.2,13.1-12.5,13.1-22.3c0-0.6-0.1-1.1-0.1-1.6c0.3,0,0.7,0,1,0
c7.7,0,14,6.2,14,13.9v32.9c0,1,0.5,1.8,1.5,1.8s1.5-0.8,1.5-1.8v-32.9c0-9.7-7.7-17.6-17.4-17.6c-1,0-2.1,0.1-3.1,0.3
c-1,0.2-1.6,1.1-1.4,2.1c0.1,0.9,0.2,1.9,0.2,2.9c0,8.9-4.5,16.2-12.1,19.6c-0.7,0.3-1,1-1,1.7v39.9
C165,235.4,166,236.2,167,236.2z"/>
</g>
<path fill="#E44125" d="M172.3,224.6c1,0,1.8-0.8,1.8-1.8v-20.7c0-1-0.8-1.8-1.8-1.8s-1.8,0.8-1.8,1.8v20.7
C170.5,223.8,171.3,224.6,172.3,224.6z"/>
</g>
<path fill="none" stroke="#E44125" stroke-width="3.5043" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M167,228.3"/>
<path fill="#FDFDF8" d="M246,233.9c0-7.7-6.2-13.9-13.9-13.9h-49.1c-7.7,0-13.9,6.2-13.9,13.9v0.1c0,7.7,6.2,13.9,13.9,13.9h49.1
c7.7,0,13.9-6.2,13.9-13.9V233.9z"/>
<path fill="#E44125" d="M227.5,233.6c0-2.9,2.4-5.3,5.3-5.3s5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3S227.5,236.5,227.5,233.6z
M231,233.6c0,1,0.8,1.8,1.8,1.8c1,0,1.8-0.8,1.8-1.8c0-1-0.8-1.8-1.8-1.8C231.8,231.8,231,232.6,231,233.6z"/>
<path fill="#E44125" d="M250,234.4c0,9.7-7.9,17.6-17.6,17.6h-49.8c-9.7,0-17.6-7.9-17.6-17.6v-0.8c0-9.7,7.9-17.6,17.6-17.6h49.8
c9.7,0,17.6,7.9,17.6,17.6V234.4z M246,233.9c0-7.7-6.2-13.9-13.9-13.9h-49.1c-7.7,0-13.9,6.2-13.9,13.9v0.1
c0,7.7,6.2,13.9,13.9,13.9h49.1c7.7,0,13.9-6.2,13.9-13.9V233.9z"/>
</g>
<g id="compass_1_">
<path id="dial" fill="#E44125" d="M105.1,232l-10.9-10.9c0.3-0.7,0.5-1.5,0.5-2.3c0-1.4-0.5-2.7-1.5-3.7c-1.6-1.6-4-1.9-6-1
l-10.9-10.9c-0.7-0.7-1.8-0.7-2.5,0c-0.7,0.7-0.7,1.8,0,2.5l10.9,10.9c-0.3,0.7-0.5,1.5-0.5,2.3c0,1.4,0.5,2.7,1.5,3.7
c1,1,2.3,1.5,3.7,1.5c0.8,0,1.6-0.2,2.3-0.5l10.9,10.9c0.3,0.3,0.8,0.5,1.2,0.5c0.4,0,0.9-0.2,1.2-0.5
C105.8,233.8,105.8,232.7,105.1,232z M88.2,220.1L88.2,220.1c-0.3-0.3-0.5-0.8-0.5-1.2c0-0.5,0.2-0.9,0.5-1.2
c0.3-0.3,0.8-0.5,1.2-0.5c0.4,0,0.9,0.2,1.2,0.5c0.3,0.3,0.5,0.8,0.5,1.2c0,0.5-0.2,0.9-0.5,1.2C90.1,220.8,88.9,220.8,88.2,220.1z
"/>
<path fill="#E44125" d="M89.5,254.8c-19.8,0-35.9-16.1-35.9-35.9c0-19.8,16.1-35.9,35.9-35.9s35.9,16.1,35.9,35.9
C125.4,238.7,109.3,254.8,89.5,254.8z M89.5,186.4c-17.9,0-32.4,14.5-32.4,32.4s14.5,32.4,32.4,32.4s32.4-14.5,32.4-32.4
S107.4,186.4,89.5,186.4z"/>
<path id="stopper_1_" fill="#E44125" d="M94.8,175.9c0-2.9-2.4-5.3-5.3-5.3s-5.4,2.4-5.4,5.3c0,2.1,0.9,3.9,2.9,4.7v3.6
c0,1,1,1.8,2,1.8s2-0.8,2-1.8V181C93,180.3,94.8,178.3,94.8,175.9z M89.8,177.7c-0.2-0.1-0.4-0.1-0.7-0.1c-0.1,0-0.2,0-0.3,0
c-0.6-0.3-1.1-0.9-1.1-1.6c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8C91.2,176.8,90.6,177.5,89.8,177.7z"/>
<path fill="#E44125" d="M89.5,189.1c-16.4,0-29.8,13.4-29.8,29.8s13.4,29.8,29.8,29.8s29.8-13.4,29.8-29.8S105.9,189.1,89.5,189.1z
M91,245.1v-4.3c0-1-1-1.8-2-1.8s-2,0.8-2,1.8v4.3c-12-1.1-22.6-11-23.7-24h4.3c1,0,1.8-1,1.8-2s-0.8-2-1.8-2h-4.3
C64,204,74,193.8,87,192.7v5.1c0,1,1,1.8,2,1.8s2-0.8,2-1.8v-5.1c13,0.7,24,11.4,24.7,24.4h-5.1c-1,0-1.8,1-1.8,2s0.8,2,1.8,2h5.1
C114.6,234,104,244.4,91,245.1z"/>
</g>
<g id="zippo">
<path id="flame" fill="#E44125" d="M304.7,182.5c-4.6,0-7.5,7.1-7.5,10.9c0,4.2,3.4,7.5,7.5,7.5c4.2,0,7.5-3.4,7.5-7.5
C312.2,189.6,309.3,182.5,304.7,182.5z M304.7,197.6c-2.3,0-4.2-1.9-4.2-4.2c0-2.8,2.4-7.5,4.2-7.5s4.2,4.7,4.2,7.5
C308.9,195.7,307,197.6,304.7,197.6z"/>
<g>
<path fill="#E44125" d="M325.5,213H318v-10.1c0-3-2.2-4.9-5.1-4.9h-15.8c-2.5,0-4.4,1.5-5,3.7c-0.6-0.3-1.3-0.5-2-0.5
c-2.9,0-5.3,2.3-5.3,5.2c0,2.9,2.3,5.2,5.2,5.2c0.7,0,0.9-0.1,1.9-0.4v1.7h-9c0,0-3-0.2-3,2.7c0,3.4,0,19.6,0,19.6
c0,8.9,6.9,16.7,15.4,16.7h17.5c8.6,0,16.1-7.7,16.1-16.7c0,0,0-16.4,0-19.5C329,212.7,325.5,213,325.5,213z M290.2,208.2
c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8c1,0,1.8,0.8,1.8,1.8C291.9,207.4,291.1,208.2,290.2,208.2z M296,202.9
c0-0.9,0.2-1.9,1.2-1.9h15.8c0.4,0,1.1,0.5,1.1,1.9V213h-18V202.9z M312.9,248h-17.5c-6.5,0-11.4-5.7-11.4-12.7V217h41v18.3
C325,242.3,319.6,248,312.9,248z"/>
<path fill="#E44125" d="M309.2,205h-8.6c-1,0-1.8,1-1.8,2s0.8,2,1.8,2h8.6c1,0,1.8-1,1.8-2S310.2,205,309.2,205z"/>
</g>
<g id="zippocap">
<path fill="#FDFDF8" d="M325.5,214.4H283v-19.9c0,0-1.2-10.4,21.1-10.6s21.4,10.6,21.4,10.6V214.4z"/>
<path fill="#E44125" d="M329,198.1v16.6c0,1.1-0.9,2.3-2,2.3h-44.6c-1.1,0-2.5-1.3-2.5-2.3v-16.6c0-9.4,7.8-16.1,17.2-16.1h15
C321.5,182,329,188.8,329,198.1z M325,213v-14.9c0-7.2-5.6-12.1-12.8-12.1h-15c-7.2,0-13.2,4.8-13.2,12.1V213H325z"/>
</g>
</g>
<g id="lantern">
<path id="lanternflame" fill="#E44125" d="M87.7,100.1c-4.3,0-7.9-3.5-7.9-7.9c0-3.9,3.1-11.4,7.9-11.4c4.8,0,7.9,7.5,7.9,11.4
C95.6,96.5,92.1,100.1,87.7,100.1z M87.7,84.3c-1.9,0-4.4,5-4.4,7.9c0,2.4,2,4.4,4.4,4.4c2.4,0,4.4-2,4.4-4.4
C92.1,89.3,89.6,84.3,87.7,84.3z"/>
<path fill="#E44125" d="M120,101.6V84.2c0-7.8-5.5-14.3-12.9-15.6c-1.9-6.5-7.8-11.1-14.6-11.3c0.2-0.6,0.4-1.3,0.4-2
c0-2.9-2.3-5.3-5.2-5.3c-2.9,0-5.2,2.4-5.2,5.3c0,0.7,0.1,1.4,0.4,2C76,57.6,70,62.1,68.1,68.5C60.2,69.4,54,76.1,54,84.2v17.4
c0,8.4,7,15.2,15,15.8v4.6h-6.7c-3.1,0-3.3,2.8-3.3,3.5v7.4c0,1,0.8,2.2,1.9,2.2h54c1,0,2.1-1.1,2.1-2.2v-7.4
c0-1.4-1.2-3.5-3.9-3.5H107v-4.7C115,116.2,120,109.6,120,101.6z M87.7,53.6c1,0,1.8,0.8,1.8,1.8s-0.8,1.8-1.8,1.8S86,56.4,86,55.4
S86.8,53.6,87.7,53.6z M83.3,61h8.8c4.9,0,9.3,3,11.2,7H72.1C74,64,78.3,61,83.3,61z M58,101.6V84.2c0-6.3,4.8-11.6,11-12.1
c0.1,0,36.4,0,36.8,0c0,0,0.2,0,0.2,0c6.1,0.7,10,5.8,10,12.1v17.4c0,6.7-4.8,12.4-11.5,12.4H98v-7.8c0-2-1.2-3.2-3.3-3.2H90v-8.8
c0-1-1-1.8-2-1.8s-2,0.8-2,1.8v8.8h-5.3c-1.9,0-3.7,1.2-3.7,3.2v7.8h-7C63.2,114,58,108.3,58,101.6z M80.1,114l0-7.5l14.9-0.1v7.6
H80.1z M113,131H63v-5h50V131z M73,122v-4h30v4H73z"/>
<path fill="#E44125" d="M63,103.4c-1,0-2-0.8-2-1.8v-6.1c0-1,1-1.8,2-1.8s2,0.8,2,1.8v6.1C65,102.5,64,103.4,63,103.4z"/>
<path fill="#E44125" d="M63,91.1c-1,0-2-0.8-2-1.8v-4.1c0-5.3,4.5-9.4,10-9.4c1,0,2,0.8,2,1.8s-0.8,1.8-1.9,1.8
c-3.4,0-6.1,2.5-6.1,5.8v4.1C65,90.3,64,91.1,63,91.1z"/>
</g>
<g id="toiletpaper">
<g id="paper">
<path fill="#E44125" d="M243.7,59H191c-1,0-1.8,0.5-1.8,1.5s0.8,1.5,1.8,1.5h40v1.8c0,1,1,1.8,2,1.8s2-0.8,2-1.8V62h7v55.5l-7,0
v-5.9c0-1-1-1.8-2-1.8s-2,0.8-2,1.8v5.9l-12.1,0.1c-1,0-1.7,0.9-1.7,1.9c0,1,1.9,1.6,1.9,1.6l24.5,0c1.6,0,2.4-1.9,2.4-3.4V61.3
C246,60.7,245.5,59,243.7,59z"/>
<path fill="#E44125" d="M233,79.1c1,0,2-0.8,2-1.8v-4.9c0-1-1-1.8-2-1.8s-2,0.8-2,1.8v4.9C231,78.3,232,79.1,233,79.1z"/>
<path fill="#E44125" d="M231,90.8c0,1,1,1.8,2,1.8s2-0.8,2-1.8v-6.1c0-1-1-1.8-2-1.8s-2,0.8-2,1.8V90.8z"/>
<path fill="#E44125" d="M231,103.1c0,1,1,1.8,2,1.8s2-0.8,2-1.8v-4.9c0-1-1-1.8-2-1.8s-2,0.8-2,1.8V103.1z"/>
</g>
<path fill="#FFFFFF" d="M220,68v58c0,0-9.5,10.5-30.1,9.9c-19.2-0.6-29.9-9.9-29.9-9.9l-23.3-68c0,0,28.8,0.1,54.3,1.1
S220,68,220,68z"/>
<g>
<g>
<g>
<path fill="#FDFDF8" d="M191.6,62.2l-0.1,2.6c-0.3,0-0.5,0-0.8,0c-9,0-9.7,2.7-9.7,3.5c0,0.8,0.7,3.5,9.7,3.5c0.3,0,0.6,0,0.8,0
l0,2.6c-0.3,0-0.6,0-0.9,0c-17,0.1-26.3-4.1-26.3-6.1c0-2.1,9.3-6.5,26.3-6.1C191.1,62.2,191.4,62.2,191.6,62.2z"/>
<path fill="#FDFDF8" d="M191.6,62.2c26.5,0.7,24.9,6.1,24.9,6.1c-0.1,1.7-7.1,5.9-24.9,6.1l0-2.6c8.2-0.2,8.9-2.7,8.9-3.5
c0-0.8-0.7-3.3-8.9-3.5L191.6,62.2z"/>
<path fill="#E44125" d="M220,68.4c0,0.3,0,56.7,0,56.9c0,8-15.2,12.4-29.6,12.3c-21.7-0.3-29.4-7.5-30.4-11.9V67.9
c0-4.4,13.1-9.2,30.4-9.2C210.8,58.7,220,63.7,220,68.4z M216.5,68.3c0,0,1.6-5.4-24.9-6.1c-0.3,0-0.6,0-0.9,0
c-17-0.4-26.3,4-26.3,6.1c0,2.1,9.3,6.2,26.3,6.1c0.3,0,0.6,0,0.9,0C209.5,74.3,216.4,70.1,216.5,68.3z M216,125.6V73.3
c-5,2.7-12.2,4.7-25.2,4.7c-5.7,0-10.8-0.4-14.8-1.1v3.3c0,1-0.5,1.8-1.5,1.8s-1.5-0.8-1.5-1.8v-4c-4-0.9-7-2.1-9-3.4v51.3
c0,0,0,4.8,9,7.4v-3.3c0-1,0.5-1.8,1.5-1.8s1.5,0.8,1.5,1.8v4.4c4,1,9.3,1.6,14.8,1.6C212.8,133.9,216,125.8,216,125.6z"/>
<path fill="#FDFDF8" d="M216,73.3v52.3c0,0.2-3.2,8.3-25.2,8.4c-5.5,0-10.8-0.6-14.8-1.6v-4.4c0-1-0.5-1.8-1.5-1.8
s-1.5,0.8-1.5,1.8v3.3c-9-2.6-9-7.4-9-7.4V72.8c2,1.3,5,2.5,9,3.4v4c0,1,0.5,1.8,1.5,1.8s1.5-0.8,1.5-1.8v-3.3
c4,0.7,9.1,1.1,14.8,1.1C203.8,78,211,76,216,73.3z M176,119.5v-4.9c0-1-0.5-1.8-1.5-1.8s-1.5,0.8-1.5,1.8v4.9
c0,1,0.5,1.8,1.5,1.8S176,120.5,176,119.5z M176,107.2v-6.1c0-1-0.5-1.8-1.5-1.8s-1.5,0.8-1.5,1.8v6.1c0,1,0.5,1.8,1.5,1.8
S176,108.2,176,107.2z M176,93.7v-4.9c0-1-0.5-1.8-1.5-1.8s-1.5,0.8-1.5,1.8v4.9c0,1,0.5,1.8,1.5,1.8S176,94.7,176,93.7z"/>
<path fill="#E44125" d="M191.6,64.9c8.2,0.2,8.9,2.7,8.9,3.5c0,0.8-0.7,3.3-8.9,3.5c-0.3,0-0.5,0-0.8,0c-9,0-9.7-2.7-9.7-3.5
c0-0.8,0.7-3.5,9.7-3.5C191,64.9,191.3,64.9,191.6,64.9z"/>
<path fill="#E44125" d="M176,114.6v4.9c0,1-0.5,1.8-1.5,1.8s-1.5-0.8-1.5-1.8v-4.9c0-1,0.5-1.8,1.5-1.8S176,113.6,176,114.6z"/>
<path fill="#E44125" d="M176,101.1v6.1c0,1-0.5,1.8-1.5,1.8s-1.5-0.8-1.5-1.8v-6.1c0-1,0.5-1.8,1.5-1.8S176,100.1,176,101.1z"/>
<path fill="#E44125" d="M176,88.8v4.9c0,1-0.5,1.8-1.5,1.8s-1.5-0.8-1.5-1.8v-4.9c0-1,0.5-1.8,1.5-1.8S176,87.8,176,88.8z"/>
</g>
<g>
</g>
</g>
</g>
</g>
<g id="axe">
<path fill="#E44125" d="M281,126.4c-2.1,2-2.1,5.4,0,7.4c1,1,2.4,1.5,3.7,1.5c1.3,0,2.7-0.5,3.7-1.5c2.1-2,2.1-5.4,0-7.4
C286.4,124.4,283.1,124.4,281,126.4z M286,131.4c-0.7,0.7-1.8,0.7-2.5,0c-0.7-0.7-0.7-1.8,0-2.5c0.3-0.3,0.8-0.5,1.2-0.5
c0.4,0,0.9,0.2,1.2,0.5C286.7,129.6,286.7,130.7,286,131.4z"/>
<path fill="#E44125" d="M357.4,90.9l-7.4-7.4c0,0,0,0,0,0l-8.1-8.1l3.1-3.1c1.4-1.4,1.4-3.6,0-5l-9.9-9.9c-1.4-1.4-3.6-1.4-5,0
l-3.1,3.1l-0.6-0.6c-1.3-1.3-3.6-1.3-5,0l-16.7,16.7c-0.7,0.7-1,1.5-1,2.5c0,0.9,0.4,1.8,1,2.5l0.7,0.7l-29.3,28.9
c-2.3,2.3-2.7,5.1-2.7,6.6l0,12.3c0,5.9,4.5,10.7,10.4,10.7c11,0,11.4-9.3,11.4-9.3l0-8.5l24.5-25.2l8,19.2c0.3,0.7,1,1.1,1.7,1.1
c0.2,0,0.3,0,0.5-0.1c0.4-0.1,10.8-3.1,18.5-10.8c7-7,9.2-14.3,9.3-14.6C358,92.1,357.8,91.4,357.4,90.9z M332.6,60l9.9,9.9
l-3.1,3.1l-9.9-9.9L332.6,60z M317.8,94.8l-1.2,1.3l-9.8-9.8L308,85L317.8,94.8z M292.3,121c-0.3,0.3-0.3,0.8-0.3,1.3v6.8
c0,0,0.6,8.1-7.7,8.1c-3.8,0-7-3.1-7-7l0-12.3c0-0.7,0.1-2.6,1.5-4l5-4.9l3.6,3.6c0.8,0.8,1.9,1.3,3.1,1.3c1.2,0,2.3-0.5,3.1-1.3
c1.7-1.7,1.7-4.5,0-6.2c-0.7-0.7-1.8-0.7-2.5,0c-0.7,0.7-0.7,1.8,0,2.5c0.3,0.3,0.3,0.9,0,1.2c-0.2,0.2-0.5,0.3-0.6,0.3
s-0.4,0-0.6-0.3l-3.6-3.6l18.1-17.9l9.9,9.9l-2.7,3.1l-3.5-3.9c0,0,0,0,0,0c-3-1.7-4.9-1.7-6.6,0c-0.8,0.8-1.5,1.9-1.5,3.1
c0,1.2,0.4,2.3,1.2,3.1c0.3,0.3,0.3,0.9,0,1.2c-0.3,0.3-0.9,0.3-1.3,0c-0.7-0.7-1.8-0.7-2.5,0c-0.7,0.7-0.7,1.8,0,2.5
c0.9,0.9,2,1.3,3.1,1.3c1.1,0,2.2-0.4,3.1-1.3c1.7-1.7,1.7-4.5,0-6.2c-0.2-0.2-0.3-0.5-0.3-0.6c0-0.1,0-0.4,0.3-0.6
c0.2-0.2,0.5-0.4,0.6-0.4c0.2,0,0.5,0.1,0.6,0.1c0,0,0,0,0,0l4,4L292.3,121z M307.2,79.2l16.7-16.7l22.7,22.7
c-1.1,2.3-3.9,8.1-7.5,11.7c-4,4-9.6,7-12.3,8.4l-4.4-10.6C322.4,94.5,307.2,79.2,307.2,79.2z M346,104.8
c-5.4,5.4-12.5,8.3-15.5,9.4l-2.4-5.7c2.8-1.4,9-4.7,13.4-9.1c3.5-3.5,6.2-8.6,7.7-11.5l4.9,4.9C353.3,94.7,351,99.8,346,104.8z"/>
</g>
</svg>
</div>
CSS
body{background-color:#FDFDF8}
div{
width:800px;
height:600px;
}
JS
var animateIcons = new TimelineMax({repeat:-1})
animateIcons.to($('#lanternflame'),.5,{scale:0,transformOrigin:'50% 100%',ease:Power2.easeOut})
.to($('#lanternflame'),.5,{scale:1,transformOrigin:'50% 100%',ease:Power2.easeOut})
.to($('#paper'),.25,{x:'-=50'})
.to($('#paper'),.25,{x:'+=50'})
.to($('#axe'),.25,{rotation:30,transformOrigin:'30% 100%'})
.to($('#axe'),.25,{rotation:0,transformOrigin:'30% 100%'})
.to($('#dial'),.5,{rotation:360,transformOrigin:'50% 50%',ease:Bounce.easeInOut})
.to($('#knifeblade'),.25,{rotation:88,transformOrigin:'53% 100%'})
.to($('#knifeblade'),.25,{rotation:0,transformOrigin:'53% 100%'},'+=.25')
.to($('#zippocap'),.25,{rotation:90,transformOrigin:'100% 100%'})
.from($('#flame'),.5,{scale:0,transformOrigin:'50% 100%',ease:Bounce.easeOut})
.to($('#zippocap'),.25,{rotation:0,transformOrigin:'100% 100%'})
jsfiddle 没有 jQuery 作为外部资源包含在内,添加它可以解决您的问题。
在 JsFiddle 的左侧,单击外部资源,您应该会看到一个空列表。然后,您可以添加代码笔示例具有的以下 2 个外部资源:
//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js
您可以通过单击 设置 然后 Javascript.
查看 codepen 中的依赖项This 分叉了您的代码之一。
您忘记导入 jquery 库和 Tweenmax 库。它们需要在 <HTML>
中导入。
//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js