CSS - 放大缩小淡入淡出效果-526互联

效果图：

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS Zoom in and out Animation</title>
    <style>

        @-webkit-keyframes zoomIn {
          from {
            opacity: 0;
            -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
          }

          to {
            opacity: 1;
          }
        }

        @keyframes zoomIn {
          from {
            opacity: 0;
            -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
          }

          to {
            opacity: 1;
          }
        }

        .zoomIn {
          -webkit-animation-name: zoomIn;
          animation-name: zoomIn;
        }


        #box {
           height:400px;
           width:400px;
           background: red;
           -webkit-animation: zoomIn 2s ease .5s forwards;
           opacity:0;
        }

    </style>
    <style>

        @keyframes zoom-in-zoom-out {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(1.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }

        .zoom-in-out-box {
          margin: 24px;
          width: 50px;
          height: 50px;
          background: #f50057;
          animation: zoom-in-zoom-out 1s ease infinite;
        }
  
    </style>
    
</head>

<body>

    <div id="box"></div>
    
    <div class="zoom-in-out-box"></div>

</body>

</html>

转载请注明，
原文出处：https://www.cnblogs.com/eddyz/p/17769960.html