Анимация svg путем зависания над другим элементом

Question

Я пытаюсь анимировать элементы SVG, когда пользователь наводит курсор на div. Я пробовал использовать только CSS, а затем Snap SVG, но ни один из них не работает, и я не могу понять, что мне не хватает. В принципе, я бы хотел, чтобы пузыри поднимались всякий раз, когда пользователь нависает над контейнером «FirstColumnBasic». Вот мой HTML:

<div class="TwoColContainerBasic"> 
<div class="FirstColumnBasic"> 
    <h6><a href="#">Science</a></h6> 

<div id="svgwrapper" style="width:100px;float:right;"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 248.63 406.608"> 
<path fill="#DCD9D8" d="M91.94,6.662c12.13-8.99,29.92-8.8,42.05,0.08c4.271,2.71,7.061,7.01,10.341,10.74 
    c9.319-4.85,20.79-4.96,30.27-0.479c11.53,4.84,20.14,15.93,22.01,28.289c0.471,2.57,0.07,5.311,0.841,7.811 
    c6.289,2.24,12.67,4.89,17.329,9.87c6.36,6.359,9.79,15.399,9.86,24.34c-0.33,7.65-2.88,15.37-7.86,21.26 
    c-5.069,6.141-12.359,10.34-20.17,11.83c-3.54,6.51-7.92,12.811-14.479,16.57c-9.84,6.53-22.58,7.069-33.54,3.26 
    c0.01,2.35,0.02,4.71,0.03,7.08c3.819,0.14,7.71-0.26,11.479,0.479c3.46,1.82,4.101,7,1.88,10c-3.279,3.07-8.16,1.7-12.2,2.351 
    c0.12,32.39,0.03,64.79,0.04,97.18c0.021,1.25,0.07,2.61,0.851,3.681c22.28,32.77,44.399,65.67,66.64,98.479 
    c10.33,15.66,21.23,30.96,31.32,46.771c-16.36,0.71-32.771,0.1-49.141,0.31c-59.67-0.01-119.339-0.01-179,0 
    c-6.83-0.08-13.67,0.21-20.49-0.23c6.72-10.939,14.29-21.34,21.33-32.069c25.17-37.2,50.33-74.431,75.47-111.65 
    c0.86-1.63,0.74-3.55,0.86-5.33c-0.07-32.399,0.1-64.819-0.271-97.2c-2.95-0.25-6.03,0.04-8.86-0.96 
    c-4.819-1.89-4.12-10.51,0.971-11.5c4.16-0.54,8.359-0.35,12.54-0.59c-0.11-5.6-0.04-11.189-0.08-16.779 
    c-4.061,3.01-8.12,6.239-13.07,7.63c-9.68,3.609-20.83,1.89-29.45-3.591c-7.09-4.72-12.41-12.06-14.66-20.27 
    c-1.36-6.89-1.2-14.2,1.31-20.82c-4.41-6.859-8.06-14.609-7.79-22.97c-0.02-13.07,7.76-25.81,19.47-31.66 
    c5.76-3.28,12.5-3.83,18.99-3.87C77.42,23.742,82.65,12.832,91.94,6.662z"/> 
<path fill="#FFFFFF" d="M101.21,10.952c13.609-7.02,32.76,0.51,37.17,15.22c-2.36,3.119-5.62,5.729-6.41,9.79 
    c3.31-1.12,5.25-4.221,8.03-6.15c5.979-4.21,12.939-7.97,20.5-7.39c9.229-0.04,18.08,4.909,23.2,12.52 
    c4.46,6.57,5.76,14.9,4.239,22.63c-10.239,2.08-21.58,7.65-24.939,18.28c7.689-6.53,16.2-12.95,26.46-14.53 
    c13.35-0.979,26.26,10.5,26.66,23.92c0.83,10.021-5.021,20.17-14.051,24.53c-3.47,1.99-7.51,2.24-11.33,3.09 
    c-2.579,3.72-3.649,8.43-6.96,11.7c-7.329,8.58-19.699,11.65-30.38,8.4c4.37-6.971,2.21-16.561-4.18-21.521 
    c-3.71-3.189-8.82-3.59-13.49-3.55c0.78,0.91,3.48,1.93,1.88,3.35l-0.659,0.32c-7.921,3.66-9.23,13.46-10.61,21.09 
    c-1.45-5.33-1.39-11.22,1.1-16.229c1.73-3.341,5.311-5.061,8.75-6.11c-0.72-0.64-1.439-1.271-2.149-1.9 
    c-7.42,2.33-12.95,9.931-12.051,17.79c0.73,8.78,9.08,15.82,17.83,15.41c0.021,1.851,0.04,3.72,0.051,5.59 
    c-9.841-0.029-19.681-0.05-29.511,0.011c-0.25-7.221,0.03-14.44-0.159-21.66c-8.351-4.101-12.971-12.79-15.851-21.24 
    c-1.7-4.56-1.979-9.46-2.53-14.25c-0.909,0.85-1.569,1.95-1.659,3.229c-1.391,8.221,0.81,16.94,5.72,23.641 
    c0.899,1.32,1.89,2.63,2.47,4.149c-7.59,11-24.56,13.48-35.16,5.46c-7.67-5.289-11.99-15.079-10.66-24.319 
    c0.46-3.8,2.27-7.23,3.8-10.681c-6.93-6.649-11.26-16.67-9.08-26.289c2.14-11.221,11.86-20.551,23.22-22.011 
    c6.88-0.93,13.67,1.4,19.88,4.16c5.51,2.47,9.92,6.67,14.68,10.29c-2-9.13-11.52-13.37-19.25-16.81 
    c-0.23-4.57-0.58-9.29,0.81-13.721C89.15,20.152,94.28,13.962,101.21,10.952z"/> 
<g> 
    <path fill="#E66727" d="M137.61,111.242c1.601-1.42-1.1-2.439-1.88-3.35c4.67-0.04,9.78,0.36,13.49,3.55 
     c6.39,4.96,8.55,14.55,4.18,21.521c-2.85,4.81-8.02,8.1-13.58,8.649c-8.75,0.41-17.1-6.63-17.83-15.41 
     c-0.899-7.859,4.631-15.46,12.051-17.79c0.71,0.63,1.43,1.261,2.149,1.9c-3.439,1.05-7.02,2.77-8.75,6.11 
     c-2.489,5.01-2.55,10.899-1.1,16.229c1.38-7.63,2.689-17.43,10.61-21.09L137.61,111.242z"/> 
</g> 
<path id="bottle" fill="#E66727" d="M108.64,197.572c9.51,0.061,19.03,0.05,28.55,0.01c0,22.24,0.03,44.49-0.02,66.74 
    c-0.07,1.48,0.26,2.96,1.02,4.25c8.771,15.21,17.62,30.391,26.34,45.641c16.131,26.51,32.41,52.93,48.511,79.46 
    c-54.86-0.21-109.721-0.9-164.58-1.23c-5.52-0.12-11.06,0.07-16.57-0.28c-0.02-0.359-0.05-1.069-0.06-1.42 
    c11.03-17.31,21.98-34.68,32.98-52.02c8.23-12.91,16.51-25.8,23.9-39.21c6.6-11.45,13.37-22.811,19.74-34.37 
    C108.86,242.642,108.46,220.092,108.64,197.572z"/> 
<g id="bubble1"> 
    <path fill="#E66727" d="M121.398,262.395c8.919-1.689,18.22,5.07,19.53,14.021c1.078,6.08-1.891,12.28-6.602,16.06 
     c-5.82,4.17-14.099,4.201-19.938,0.061c-4.171-3.35-7.23-8.46-6.881-13.95C107.448,270.746,113.858,263.866,121.398,262.395z"/> 
    <path fill="#FFFFFF" d="M113.217,270.256c2.08-3.681,6.41-5.441,10.48-5.57c-8.53,4.07-10.57,14.22-12.09,22.619 
     C110.638,281.656,110.238,275.406,113.217,270.256z"/> 
</g> 
<g id="bubble2"> 
    <path fill="#E66727" d="M120.689,284.674c8.92-1.689,18.22,5.07,19.53,14.021c1.079,6.08-1.891,12.28-6.601,16.06 
     c-5.82,4.17-14.1,4.201-19.939,0.061c-4.171-3.35-7.23-8.46-6.881-13.95C106.739,293.025,113.149,286.145,120.689,284.674z"/> 
    <path fill="#FFFFFF" d="M112.508,292.536c2.08-3.681,6.41-5.441,10.48-5.57c-8.53,4.07-10.57,14.22-12.09,22.619 
     C109.929,303.935,109.529,297.685,112.508,292.536z"/> 
</g> 
<g id="bubble3"> 
    <path fill="#E66727" d="M121.398,306.735c8.92-1.689,18.22,5.07,19.53,14.021c1.079,6.08-1.891,12.28-6.601,16.06 
     c-5.82,4.17-14.1,4.201-19.939,0.061c-4.171-3.35-7.23-8.46-6.881-13.95C107.448,315.085,113.858,308.206,121.398,306.735z"/> 
    <path fill="#FFFFFF" d="M113.217,314.596c2.08-3.681,6.41-5.441,10.48-5.57c-8.53,4.07-10.57,14.22-12.09,22.619 
     C110.638,325.996,110.238,319.746,113.217,314.596z"/> 
</g> 
</svg> 
</div> 
    </div> 
</div> 

И мой CSS:

#bubble1, #bubble2, #bubble3 { 
    transition: margin-bottom .8s ease-in-out; 
    -webkit-transition: margin-bottom 5s ease-in-out; 
    -moz-transition: margin-bottom 5 ease-in-out; 
    -ms-transition: margin-bottom 5 ease-in-out; 
    -o-transition: margin-bottom 5 ease-in-out; 
} 

.FirstColumnBasic:hover > #bubble1. #bubble2, #bubble3 { 
    -webkit-transform: translateY(-100px); 
    -moz-transform: translateY(-100px); 
    -o-transform: translateY(-100px); 
    -ms-transform: translateY(-100px); 
    transform: translateY(-100px); 
} 

Я знаю, что это должно быть что-то простое, что я пропускаю, но я в недоумении.

Answer 1

У вас возникло несколько проблем с вашим CSS. Попробуйте это:

#bubble1, 
#bubble2, 
#bubble3 { 
    transition: transform .8s ease-in-out; 
    -webkit-transition: transform .8s ease-in-out; 
    -moz-transition: transform .8s ease-in-out; 
    -ms-transition: transform .8s ease-in-out; 
    -o-transition: transform .8s ease-in-out; 
} 

.FirstColumnBasic:hover #bubble1, 
.FirstColumnBasic:hover #bubble2, 
.FirstColumnBasic:hover #bubble3 { 
    -webkit-transform: translateY(-100px); 
    -moz-transform: translateY(-100px); 
    -o-transform: translateY(-100px); 
    -ms-transform: translateY(-100px); 
    transform: translateY(-100px); 
} 

Если вы хотите, чтобы анимация "сброс", когда пользователь прекращает зависания, попробуйте следующее:

.FirstColumnBasiC#bubble1, 
.FirstColumnBasiC#bubble2, 
.FirstColumnBasiC#bubble3 { 
    -webkit-transform: translateY(0px); 
    -moz-transform: translateY(0px); 
    -o-transform: translateY(0px); 
    -ms-transform: translateY(0px); 
    transform: translateY(0px); 
} 

Fiddle: http://jsfiddle.net/5225cs3y/