I have a mockup image for a svg css animation for a slider here and want to implement this in css.
The animation consists of a ballon with the current number value and should be zoomed in and out from left to right or right to left.
Currently i'm at the starting point and a bit lost how to solve this. The main problem for me is how to zoom this ballon in or out, so the front balloon is overlapping the 2 balloons in the background.
Does anyone has a similar sample or can point me in the right direction how to solve this?
Would be great, thanks!
Updated:
Excuse my poor drawing skills, but i hope this explains it better:
CodePudding user response：
I did according to the words in the question
The main problem for me is how to zoom this ballon in or out, so the front balloon is overlapping the 2 balloons in the background.
When you hover over the middle ball, it increases in size and overlaps two adjacent balls
#middle {
transform-origin:center;
transform-box:fill-box;
}
#middle:hover {
animation:scaled 0.8s linear forwards;
fill:#CDA349;
}
@keyframes scaled {
100%{transform:scale(2.1);}
}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="440" height="440" viewBox="-50 -50 550 550">
<g fill="#F1C056">
<path d="M311.4 157.5c14.2-4.3 34.3 6.6 46.1 18.2a44.3 44.3 0 0 1 12.6 30.3c.1 23.4-14.8 44.8-26.1 65.3-7.4 13.4-15.2 22.8-27 37.3-8.1-11-18.4-23.8-27.6-40.1 5.9-14 14.6-27.6 19.6-42.2 3.8-11 7.5-22.2 8-33.8.4-11.8-2.7-18-5.6-35z" />
<path d="M125.6 160.8c-9.6-5.8-23.1-4.8-33.8-1.2a55.7 55.7 0 0 0-35.4 58.5c3.1 14.2 11 27.1 17.8 40a277 277 0 0 0 16.4 26.5c5.6 8.3 11 17 18 24 14.5-20.6 22-30.4 33-51.3-4-12.9-13-26.4-16.7-40.6a111.2 111.2 0 0 1-4.3-33.3c.3-7.7 3-12.7 5-22.6z" />
<path id="middle" d="M218.6 355.2a469 469 0 0 1-46.5-69.5c-15-28.4-32.4-52.7-38.3-79.7a89.4 89.4 0 0 1 20-73.6 89 89 0 0 1 65.7-28.5 91.2 91.2 0 0 1 64.4 29.4c14.9 16.7 25 41.8 21 63.9-6 32.4-24.9 60.1-40.6 88.5a492.4 492.4 0 0 1-45.7 69.5z" />
</g>
</svg>CodePudding user response：
@Alexandr_TT
Great, this is going in the right direction. I implemented it in js as a caroussel slide animation, but want to implement this as a single svg animation like the image in the initial post for display only.
Here is my Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<link rel="stylesheet" href="<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">" media="screen">
<style>
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.carousel {
background: white;
}
.carousel-cell {
width: 70%;
height: 200px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.carousel-cell svg {
display: block;
max-width: 100%;
max-height: 100%;
opacity: 1;
-webkit-transform: scale(0.85);
transform: scale(0.85);
-webkit-transition: opacity 1s, -webkit-transform 0.8s, transform 0.8s, -webkit-filter 0.8s, filter 0.8s;
transition: opacity 1s, transform 0.8s, filter 0.8s;
}
.carousel-cell.is-selected svg {
opacity: 1;
-webkit-transform: scale(2);
transform: scale(2);
-webkit-filter: none;
filter: none;
}
@media screen and ( min-width: 768px ) {
.carousel-cell {
height: 400px;
}
}
@media screen and ( min-width: 960px ) {
.carousel-cell {
width: 10%;
}
}
.flickity-prev-next-button {
width: 60px;
height: 60px;
background: transparent;
opacity: 1;
}
.flickity-prev-next-button:hover {
background: transparent;
opacity: 1;
}
/* arrow color */
.flickity-prev-next-button .arrow {
fill: white;
}
.flickity-prev-next-button.no-svg {
color: white;
}
/* closer to edge */
.flickity-prev-next-button.previous { left: 0; }
.flickity-prev-next-button.next { right: 0; }
/* hide disabled button */
.flickity-prev-next-button:disabled {
display: none;
}
</style>
</head>
<body>
<div class="carousel js-flickity">
<div class="carousel-cell">
<svg width="440" height="440" viewBox="-50 -50 550 550" xmlns="http://www.w3.org/2000/svg">
<g fill="#F1C056" transform="matrix(0.464127, 0, 0, 0.464127, 108.349289, 107.221474)" style="">
<path id="left" d="M218.6 355.2a469 469 0 0 1-46.5-69.5c-15-28.4-32.4-52.7-38.3-79.7a89.4 89.4 0 0 1 20-73.6 89 89 0 0 1 65.7-28.5 91.2 91.2 0 0 1 64.4 29.4c14.9 16.7 25 41.8 21 63.9-6 32.4-24.9 60.1-40.6 88.5a492.4 492.4 0 0 1-45.7 69.5z"/>
</g>
</svg>
</div>
<div class="carousel-cell">
<svg width="440" height="440" viewBox="-50 -50 550 550" xmlns="http://www.w3.org/2000/svg">
<g fill="#F1C056" transform="matrix(0.464127, 0, 0, 0.464127, 108.349289, 107.221474)" style="">
<path id="middle" d="M218.6 355.2a469 469 0 0 1-46.5-69.5c-15-28.4-32.4-52.7-38.3-79.7a89.4 89.4 0 0 1 20-73.6 89 89 0 0 1 65.7-28.5 91.2 91.2 0 0 1 64.4 29.4c14.9 16.7 25 41.8 21 63.9-6 32.4-24.9 60.1-40.6 88.5a492.4 492.4 0 0 1-45.7 69.5z"/>
</g>
</svg>
</div>
<div class="carousel-cell">
<svg width="440" height="440" viewBox="-50 -50 550 550" xmlns="http://www.w3.org/2000/svg">
<g fill="#F1C056" transform="matrix(0.464127, 0, 0, 0.464127, 108.349289, 107.221474)" style="">
<path id="right" d="M218.6 355.2a469 469 0 0 1-46.5-69.5c-15-28.4-32.4-52.7-38.3-79.7a89.4 89.4 0 0 1 20-73.6 89 89 0 0 1 65.7-28.5 91.2 91.2 0 0 1 64.4 29.4c14.9 16.7 25 41.8 21 63.9-6 32.4-24.9 60.1-40.6 88.5a492.4 492.4 0 0 1-45.7 69.5z"/>
</g>
</svg>
</div>
</div>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
</body>
</html>