Question

我想制作增加圆框阴影及其宽度和高度的动画。

我想要做的是圆形框阴影和圆宽高度平滑增加，然后调整到它的实际宽度高度它应该扩展更多

我能完成比特，但动画不顺畅。

我到底想做的是什么。

这是小提琴

＆＃13;

 .circle{
     width: 150px;
     height: 150px;
     border-radius: 75px;
     background: #74E2BF;
     position:absolute;
     top:50px;
     left:150px;
     -webkit-box-shadow: 0px 0px 0px 25px rgba(116,226,191,0.3);
     -moz-box-shadow: 0px 0px 0px 25px rgba(116,226,191,0.3);
     box-shadow: 0px 0px 0px 25px rgba(116,226,191,0.3);
     opacity:0;
}

.circle.animated {
     -webkit-animation: expand 2.5s 1 ease ;
     animation: expand 2.5s 1 ease;
     animation-fill-mode: forwards;
     transform: scale(0.1);
     opacity:1;
}

@keyframes expand {
     0% {
         -webkit-box-shadow: 0px 0px 0px 1px rgba(116,226,191,0.3);
         -moz-box-shadow: 0px 0px 0px 1px rgba(116,226,191,0.3);
         box-shadow: 0px 0px 0px 1px rgba(116,226,191,0.3);
         transform: scale(0.001);
         opacity:1;
    }
     25% {
         -webkit-box-shadow: 0px 0px 0px 105px rgba(116,226,191,0.3);
         -moz-box-shadow: 0px 0px 0px 105px rgba(116,226,191,0.3);
         box-shadow: 0px 0px 0px 105px rgba(116,226,191,0.3);
         transform: scale(0.001);
         opacity:1;
    }
     50% {
         -webkit-box-shadow: 0px 0px 0px 105px rgba(116,226,191,0.3);
         -moz-box-shadow: 0px 0px 0px 105px rgba(116,226,191,0.3);
         box-shadow: 0px 0px 0px 105px rgba(116,226,191,0.3);
         transform: scale(0.001);
         opacity:1;
    }
     60% {
         -webkit-box-shadow: 0px 0px 0px 45px rgba(116,226,191,0.3);
         -moz-box-shadow: 0px 0px 0px 45px rgba(116,226,191,0.3);
         box-shadow: 0px 0px 0px 45px rgba(116,226,191,0.3);
         transform: scale(1.3);
         opacity:1;
    }
     75% {
         -webkit-box-shadow: 0px 0px 0px 25px rgba(116,226,191,0.3);
         -moz-box-shadow: 0px 0px 0px 25px rgba(116,226,191,0.3);
         box-shadow: 0px 0px 0px 25px rgba(116,226,191,0.3);
         transform: scale(1);
         opacity:1;
    }
     100% {
         -webkit-box-shadow: 0px 0px 0px 25px rgba(116,226,191,0.3);
         -moz-box-shadow: 0px 0px 0px 25px rgba(116,226,191,0.3);
         box-shadow: 0px 0px 0px 25px rgba(116,226,191,0.3);
         transform: scale(1);
         opacity:1;
    }
}

＆＃13;

<div class="circle animated"></div>

＆＃13;

Answer 1

使用立方贝塞尔定时函数可以更轻松地完成您想要实现的目标

您可以使用此功能的值（并以图形方式查看我使用的那个）here

顺便说一句，box-shadow现在已被支持无前缀了。

.circle{
     width: 150px;
     height: 150px;
     border-radius: 75px;
     background: #74E2BF;
     position:absolute;
     top:50px;
     left:150px;
     box-shadow: 0px 0px 0px 25px rgba(116,226,191,0.3);
     opacity:0;
}

.circle.animated {
     animation: expand 2.5s 1 cubic-bezier(.3,1.59,.7,1.52);
     animation-fill-mode: forwards;
     transform: scale(0.1);
     opacity:1;
}

@keyframes expand {
     0% {
         box-shadow: 0px 0px 0px 1px rgba(116,226,191,0.3);
         transform: scale(0.001);
         opacity:1;
    }
     100% {
         box-shadow: 0px 0px 0px 25px rgba(116,226,191,0.3);
         transform: scale(1);
         opacity:1;
    }
}

<div class="circle animated"></div>

使用动画展开圆框阴影和宽度高度

1 个答案: