css - Animated SVG does not reach bottom of container - Stack Overflow

admin管理员组

文章数量:1395352

hello all and thanks for being here, lets see if you can clarify what is wrong here:

i am trying to add a simple animation of a snowflake falling from top to bottom within a container: here link: sandbox

import "./styles.css";
const seasonArray = ["winter", "summer", "autumn"];
const getSeasonValue = (season) => {
  switch (season) {
    case "winter":
      return winter;
    case "autumn":
      return autumn;
    case "summer":
      return summer;
    default:
      return summer;
  }
};

const StyledButton = styled.button`
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 33%;
  position: relative;
  min-width: 30%;
  height: 20%;
`;

const StyledButtonsWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  height: 100vh;
`;
export default function App() {
  return (
    <StyledButtonsWrapper>
      {seasonArray.map((season) => {
        return (
          <StyledButton key={season} label={season}>
            <SnowFlakeIcon />
            {season.charAt(0).toUpperCase()}
            {season.substring(1)}
          </StyledButton>
        );
      })}
    </StyledButtonsWrapper>
  );
}
const StyledSvg = styled.svg`
  position: absolute;
  top: 0;
  width: 100%
  height: 100%; 
  animation: snowFlake 2s ease-in-out infinite;

  @keyframes snowFlake {
    0% {
      transform:  translateY(0);
    }
    50% {
      transform:translateY(50%);
    }
    100% {
      transform:  translateY(100%);
    }
  }
`;

const SnowFlakeIcon = () => {
  return (
    <StyledSvg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="m10 20-1.25-2.5L6 18" fill="#88C9F9" />
      <path d="M10 4 8.75 6.5 6 6" fill="#88C9F9" />
      <path d="m14 20 1.25-2.5L18 18" fill="#88C9F9" />
      <path d="m14 4 1.25 2.5L18 6" fill="#88C9F9" />
      <path d="m17 21-3-6h-4" fill="#88C9F9" />
      <path d="m17 3-3 6 1.5 3" fill="#88C9F9" />
      <path d="M2 12h6.5L10 9" fill="#88C9F9" />
      <path d="m20 10-1.5 2 1.5 2" fill="#88C9F9" />
      <path d="M22 12h-6.5L14 15" fill="#88C9F9" />
      <path d="m4 10 1.5 2L4 14" fill="#88C9F9" />
      <path d="m7 21 3-6-1.5-3" fill="#88C9F9" />
      <path d="m7 3 3 6h4" fill="#88C9F9" />
    </StyledSvg>
  );
};

I believe that height 100% on my StyledSvg means 100% of its own height, however I seem not to be able how to handle it for the whole parent.

what am I not getting here?

hello all and thanks for being here, lets see if you can clarify what is wrong here:

i am trying to add a simple animation of a snowflake falling from top to bottom within a container: here link: sandbox

import "./styles.css";
const seasonArray = ["winter", "summer", "autumn"];
const getSeasonValue = (season) => {
  switch (season) {
    case "winter":
      return winter;
    case "autumn":
      return autumn;
    case "summer":
      return summer;
    default:
      return summer;
  }
};

const StyledButton = styled.button`
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 33%;
  position: relative;
  min-width: 30%;
  height: 20%;
`;

const StyledButtonsWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  height: 100vh;
`;
export default function App() {
  return (
    <StyledButtonsWrapper>
      {seasonArray.map((season) => {
        return (
          <StyledButton key={season} label={season}>
            <SnowFlakeIcon />
            {season.charAt(0).toUpperCase()}
            {season.substring(1)}
          </StyledButton>
        );
      })}
    </StyledButtonsWrapper>
  );
}
const StyledSvg = styled.svg`
  position: absolute;
  top: 0;
  width: 100%
  height: 100%; 
  animation: snowFlake 2s ease-in-out infinite;

  @keyframes snowFlake {
    0% {
      transform:  translateY(0);
    }
    50% {
      transform:translateY(50%);
    }
    100% {
      transform:  translateY(100%);
    }
  }
`;

const SnowFlakeIcon = () => {
  return (
    <StyledSvg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="m10 20-1.25-2.5L6 18" fill="#88C9F9" />
      <path d="M10 4 8.75 6.5 6 6" fill="#88C9F9" />
      <path d="m14 20 1.25-2.5L18 18" fill="#88C9F9" />
      <path d="m14 4 1.25 2.5L18 6" fill="#88C9F9" />
      <path d="m17 21-3-6h-4" fill="#88C9F9" />
      <path d="m17 3-3 6 1.5 3" fill="#88C9F9" />
      <path d="M2 12h6.5L10 9" fill="#88C9F9" />
      <path d="m20 10-1.5 2 1.5 2" fill="#88C9F9" />
      <path d="M22 12h-6.5L14 15" fill="#88C9F9" />
      <path d="m4 10 1.5 2L4 14" fill="#88C9F9" />
      <path d="m7 21 3-6-1.5-3" fill="#88C9F9" />
      <path d="m7 3 3 6h4" fill="#88C9F9" />
    </StyledSvg>
  );
};

I believe that height 100% on my StyledSvg means 100% of its own height, however I seem not to be able how to handle it for the whole parent.

what am I not getting here?

• css
• reactjs
• css-animations
• styled-components

Share Follow asked Mar 14 at 14:53 JGarnieJGarnie 61288 silver badges2626 bronze badges 1

• Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet using the <> icon.. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/example doesn't work can I just paste a link. – Paulie_D Commented Mar 14 at 15:06

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You need to rearrange the DIVs containing the SVG snowflakes, so that the buttons of "seasons" precede them. And then adjust the CSS as needed, like so:

.DLsnt {
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 33%;
  position: relative;
  min-width: 30%;
  height: 20%;
}

.cTlyjm {
  display: flex;
  justify-content: space-between;
  height: 100vh;
}

.fgjuVP {
  height: 100%;
  width: 24px; /*change here*/
  position: relative; /*change here, too*/
  animation: snowFlake 2s ease-in-out infinite;
  left: calc(-16.5%); /*the half of the max-width of the .DLsnt button*/
}

@keyframes snowFlake {
  0% {
    transform: translate(0%);
  }

  50% {
    transform: translate(0, 50%);
  }

  100% {
    transform: translate(0, 100%);
  }
}

<div id="root">
  <div class="sc-gjcoXW cTlyjm">
    <button label="winter" class="sc-FEMpB DLsnt">Winter</button>
    <div class="sc-dVBluf fgjuVP">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="m10 20-1.25-2.5L6 18" fill="#88C9F9"></path>
                        <path d="M10 4 8.75 6.5 6 6" fill="#88C9F9"></path>
                        <path d="m14 20 1.25-2.5L18 18" fill="#88C9F9"></path>
                        <path d="m14 4 1.25 2.5L18 6" fill="#88C9F9"></path>
                        <path d="m17 21-3-6h-4" fill="#88C9F9"></path>
                        <path d="m17 3-3 6 1.5 3" fill="#88C9F9"></path>
                        <path d="M2 12h6.5L10 9" fill="#88C9F9"></path>
                        <path d="m20 10-1.5 2 1.5 2" fill="#88C9F9"></path>
                        <path d="M22 12h-6.5L14 15" fill="#88C9F9"></path>
                        <path d="m4 10 1.5 2L4 14" fill="#88C9F9"></path>
                        <path d="m7 21 3-6-1.5-3" fill="#88C9F9"></path>
                        <path d="m7 3 3 6h4" fill="#88C9F9"></path>
                    </svg>
    </div>
    <button label="summer" class="sc-FEMpB DLsnt">Summer</button>
    <div class="sc-dVBluf fgjuVP">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="m10 20-1.25-2.5L6 18" fill="#88C9F9"></path>
                            <path d="M10 4 8.75 6.5 6 6" fill="#88C9F9"></path>
                            <path d="m14 20 1.25-2.5L18 18" fill="#88C9F9"></path>
                            <path d="m14 4 1.25 2.5L18 6" fill="#88C9F9"></path>
                            <path d="m17 21-3-6h-4" fill="#88C9F9"></path>
                            <path d="m17 3-3 6 1.5 3" fill="#88C9F9"></path>
                            <path d="M2 12h6.5L10 9" fill="#88C9F9"></path>
                            <path d="m20 10-1.5 2 1.5 2" fill="#88C9F9"></path>
                            <path d="M22 12h-6.5L14 15" fill="#88C9F9"></path>
                            <path d="m4 10 1.5 2L4 14" fill="#88C9F9"></path>
                            <path d="m7 21 3-6-1.5-3" fill="#88C9F9"></path>
                            <path d="m7 3 3 6h4" fill="#88C9F9"></path>
                        </svg>
    </div>
    <button label="autumn" class="sc-FEMpB DLsnt">Autumn</button>
    <div class="sc-dVBluf fgjuVP">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="m10 20-1.25-2.5L6 18" fill="#88C9F9"></path>
                            <path d="M10 4 8.75 6.5 6 6" fill="#88C9F9"></path>
                            <path d="m14 20 1.25-2.5L18 18" fill="#88C9F9"></path>
                            <path d="m14 4 1.25 2.5L18 6" fill="#88C9F9"></path>
                            <path d="m17 21-3-6h-4" fill="#88C9F9"></path>
                            <path d="m17 3-3 6 1.5 3" fill="#88C9F9"></path>
                            <path d="M2 12h6.5L10 9" fill="#88C9F9"></path>
                            <path d="m20 10-1.5 2 1.5 2" fill="#88C9F9"></path>
                            <path d="M22 12h-6.5L14 15" fill="#88C9F9"></path>
                            <path d="m4 10 1.5 2L4 14" fill="#88C9F9"></path>
                            <path d="m7 21 3-6-1.5-3" fill="#88C9F9"></path>
                            <path d="m7 3 3 6h4" fill="#88C9F9"></path>
                        </svg>
    </div>
  </div>
</div>

本文标签： cssAnimated SVG does not reach bottom of containerStack Overflow