更改CSS动画锚点

Question

我有以下页面（见图）

当我单击红色按钮时，我希望div在显示给用户时进行动画处理。 但是，我希望动画来自按钮。 现在，动画来自页面中心。

这是我的代码

@keyframes fadeInScale {
    0%{
        opacity:0;
        transform: scale(0.5);
    }
    100%{
        opacity:1;
        transform: scale(1);
    }
}

@keyframes fadeOutScale {
    0%{
        opacity:1;
        transform: scale(1);
    }
    100%{
        opacity:0;
        transform: scale(0.5);
    }
}

.overlay {
    position: absolute;
    top: 0;
    z-index: 500;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
}

.fade-scale-in {
    display: block;
    animation: fadeInScale 0.3s 1 ease-out;
}

.fade-scale-out {
    display: block;
    animation: fadeOutScale 0.3s 1 ease-out;
}

当我单击红色圆圈时，用户会看到一个覆盖页面（实际上是具有绝对位置的类覆盖的div）。 我在div中添加了淡入淡出类（带有类覆盖）。 然后，div从屏幕的中心过渡，并增长以适合用户的屏幕。 我想要它，以便div从红色圆圈过渡。 我可以使用转换来实现这一目标吗？

这是代码。 如您所见，当您单击黄色圆圈时，div从中心而不是从黄色圆圈进行动画： https : //jsfiddle.net/e4g71y4m/3/

Answer 1

您可以通过添加transform-origin: top left;来做到这一点transform-origin: top left; 到.overlay元素。 （不要忘记前缀（ -webkit ， -moz等）。

 var overlay$ = $('.overlay'); overlay$.bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e) { console.debug('test'); if (e.animationName !== undefined && e.animationName == "fadeOutScale") { overlay$.addClass('hide'); } else if (e.originalEvent.animationName !== undefined && e.originalEvent.animationName == "fadeOutScale") { overlay$.addClass('hide'); } }); $('.click').on('click', function() { overlay$.removeClass('hide').addClass('fade-scale-in'); }); $('.click-again').on('click', function() { overlay$.removeClass('hide').addClass('fade-scale-out'); }); 

 @keyframes fadeInScale { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes fadeOutScale { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.5); } } .hide { display: none; } .overlay { position: absolute; top: 0; z-index: 500; width: 100%; height: 100%; left: 0; right: 0; bottom: 0; background: red; transform-origin: top left; } .click { background: yellow; border-radius: 50%; width: 100px; height: 100px; line-height: 100px; text-align: center; cursor: pointer; } .fade-scale-in { display: block; animation: fadeInScale 0.3s 1 ease-out; } .fade-scale-out { display: block; animation: fadeOutScale 0.3s 1 ease-out; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="click">Click me</div> <div class="overlay hide"> Test <div class="click-again">Click me again</div> </div>