I’m trying to anime a circle to go from one corner to another and grow (like bubbles and smoke). But my bubbles seem to move in the wrong direction. I can see this is due to scaling them. How can I make them move to the upper left corner and grow?
@keyframes move {
from {
transform: translateX(0) translateY(0);
opacity: 1;
}
to {
transform: translateX(-50px) translateY(-50px) scale(2);
opacity: 0;
}
}
#bubble-tiny {
animation: move 1.5s infinite;
animation-delay: 100ms;
}
#bubble-small {
animation: move 1.5s infinite;
animation-delay: 100ms;
}
#bubble-big {
animation: move 1.5s infinite;
animation-delay: 100ms;
}<svg width="666" height="201" viewBox="0 0 666 201" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="logo - to-animate">
<path id="bubble-small" fill-rule="evenodd" clip-rule="evenodd" d="M105.731 53.0967C101.778 52.6259 98.461 50.7395 96.3057 47.7363C94.9631 45.8655 94.2675 43.8302 94.1789 41.5134C94.1254 40.1147 94.2217 39.2239 94.5574 38.0109C96.1439 32.2774 102.089 28.3955 108.359 28.9988C116.072 29.7409 121.372 36.4498 119.819 43.505C118.937 47.5123 115.733 50.9847 111.608 52.4041C110.15 52.9057 108.612 53.1503 107.012 53.1352C106.44 53.1298 105.863 53.1125 105.731 53.0967ZM114.969 48.702C113.382 50.1245 111.545 51.0357 109.492 51.4187C109.054 51.5006 108.452 51.5906 108.155 51.6188C107.495 51.6813 107.465 51.6407 107.637 50.9246C107.704 50.6472 107.742 50.3957 107.723 50.3657C107.703 50.3358 107.535 50.2753 107.349 50.2312C105.918 49.8909 103.988 49.1421 102.896 48.503C100.403 47.0438 98.4971 44.8048 97.6628 42.3555L97.4113 41.6172L96.7099 41.6885C96.1256 41.7484 95.9163 41.7698 95.8286 41.6836C95.7798 41.6355 95.7687 41.554 95.7515 41.4271L95.7502 41.4174L95.7443 41.3746C95.6649 40.8116 95.8165 39.3802 96.0491 38.4967C96.5593 36.5579 97.5131 34.983 99.0383 33.5609C100.719 31.9942 102.556 31.0635 104.889 30.5972C105.849 30.4055 108.41 30.4055 109.351 30.5971C113.46 31.4342 116.715 34.1519 117.972 37.793C118.401 39.0369 118.538 40.0145 118.483 41.4494C118.415 43.1988 118.141 44.208 117.306 45.7849C116.715 46.9006 116.042 47.74 114.969 48.702Z" fill="black"/>
<path id="bubble-tiny" fill-rule="evenodd" clip-rule="evenodd" d="M124.51 62.4278C123.521 62.3101 122.692 61.8385 122.153 61.0877C121.818 60.62 121.644 60.1111 121.622 59.5319C121.608 59.1823 121.632 58.9596 121.716 58.6563C122.113 57.2229 123.599 56.2525 125.167 56.4033C127.095 56.5888 128.42 58.266 128.032 60.0298C127.811 61.0317 127.01 61.8998 125.979 62.2546C125.614 62.38 125.23 62.4412 124.83 62.4374C124.687 62.436 124.543 62.4317 124.51 62.4278ZM126.819 61.3291C126.422 61.6847 125.963 61.9125 125.45 62.0083C125.34 62.0287 125.19 62.0513 125.116 62.0583C124.951 62.0739 124.943 62.0638 124.986 61.8847C125.003 61.8154 125.012 61.7525 125.008 61.745C125.003 61.7376 124.961 61.7224 124.914 61.7114C124.556 61.6263 124.074 61.4391 123.801 61.2794C123.178 60.9145 122.701 60.3548 122.493 59.7425L122.43 59.5579L122.254 59.5757C122.108 59.5907 122.056 59.596 122.034 59.5745C122.022 59.5625 122.019 59.5421 122.015 59.5104L122.014 59.508L122.013 59.4972C121.993 59.3565 122.031 58.9986 122.089 58.7778C122.217 58.2931 122.455 57.8993 122.836 57.5438C123.257 57.1521 123.716 56.9195 124.299 56.8029C124.539 56.755 125.179 56.755 125.415 56.8029C126.442 57.0122 127.256 57.6916 127.57 58.6019C127.677 58.9128 127.711 59.1572 127.698 59.5159C127.681 59.9533 127.612 60.2056 127.403 60.5998C127.256 60.8787 127.087 61.0886 126.819 61.3291Z" fill="black"/>
<path id="bubble-big" d="M44.7817 17.3338C45.7741 20.724 47.7044 23.8639 50.463 26.4379C54.2516 29.9731 59.068 32.031 64.481 32.4273C66.2648 32.558 68.6837 32.3929 70.6434 32.0068C76.3867 30.8753 81.5869 27.4496 84.7097 22.7405C86.9846 19.3099 88.1239 15.2908 87.97 11.2391C87.8515 8.12125 87.1828 5.65139 85.6855 2.80221C85.4565 2.36641 85.2103 1.93931 84.9478 1.52161C84.3882 1.60974 83.8301 1.70251 83.2735 1.79988C84.7482 4.00513 85.7552 6.49611 86.1883 9.04744C86.3994 10.2909 86.3989 13.6478 86.1875 14.8202C85.6051 18.0497 84.3697 20.7924 82.3644 23.308C79.1304 27.3648 74.2825 30.0693 68.9317 30.8017C68.1189 30.9129 65.2628 31.0105 64.7649 30.944C64.6311 30.9262 64.2297 30.8759 63.8729 30.8324C63.0193 30.7282 62.9403 30.7023 62.9403 30.5266C62.9403 30.4449 63.0534 29.9341 63.1916 29.3916C63.3298 28.8491 63.4275 28.3909 63.4087 28.3734C63.39 28.3559 62.8511 28.2035 62.2112 28.0348C60.9868 27.7119 59.142 27.0617 58.2116 26.6251C53.6384 24.4792 50.2951 20.8848 49.0251 16.749C48.9061 16.3612 48.7764 16.0246 48.7371 16.001C48.6977 15.9773 48.1284 16.0383 47.4719 16.1364C46.8619 16.2277 46.5582 16.2694 46.3938 16.269C45.8528 16.6189 45.3155 16.9738 44.7817 17.3338Z" fill="black"/>
</g>
</g>
</svg>
3
Answers
To make the bubbles move to the upper left corner and grow, you need to adjust the transform property within the @keyframes move rule. Specifically, you should change the translateX and translateY values in the to block to negative values, as well as adjust the scale value to make the bubbles grow appropriately.
}
The issue is that the item scaling is influencing the animation and making it seem like the bubbles are going to the right upper corner.
To fix that you just need to decrease a bit more the
translateXvalue so the bubbles seem like moving to the left.Try this:
Try
transform-box: fill-box;