0

Trying to create a zoom-out animation from center. Can't get the svg to center vertically to save my life. Also would love to have it zoom out of browser-window width and not reset back to 100%.

<html>
<head>
  <style> 
  div {
  display: flex;
  justify-content: center;
  align-items: center;
  animation-name: example;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  }

  @keyframes example {
    0%   {zoom: 250%}
   33%  {zoom: 500%}
    60%  {zoom: 750%}
    80%  {zoom: 1000%}
    100% {zoom: 1250%}
  }
  body {
    background-color: #4D4D4D;
  }
  </style>
</head>
<body>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="#fff">
    <path d="M0 0h48v48H0z" fill="none"/>
    <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/>
    </svg>
  </div>
</body>
<html>
mini-me
  • 1
  • 1

1 Answers1

0
    div {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;

    }

    svg {
        animation-name: zoom;
        animation-duration: 0.5s;
        transition: all 1s;
        animation-iteration-count: 1;
    }


    @-webkit-keyframes zoom {
        0% {
            width: 55px;
            height: 55;
        }


        100% {
            width: 70px;
            height: 70px;
        }
    }

    @-moz-keyframes zoom {
        0% {
            width: 55px;
            height: 55;
        }


        100% {
            width: 70px;
            height: 70px;
        }
    }

    @-o-keyframes zoom {
        0% {
            width: 55px;
            height: 55;
        }


        100% {
            width: 70px;
            height: 70px;
        }
    }

    @keyframes zoom {
        0% {
            width: 55px;
            height: 55;
        }


        100% {
            width: 70px;
            height: 70px;
        }
    }

you can edit and add as many frames you want, i dont think you can use zoom on an svg since its vector based. plus add height to your div to be aligned in the middle of the flex box page.

Ali Kleit
  • 3,069
  • 2
  • 23
  • 39
  • The height property doesn't seem to work at all. The svg remains aligned to top in all browsers. – mini-me Apr 28 '19 at 20:10