CSS怎么设置锚点过渡动画,更改CSS动画锚点

我有以下页面(见图片) 更改CSS动画锚点

当我点击红色按钮，我想一个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从红色圆圈过渡。我可以使用转换来实现此目的吗？

2016-02-25

Jasmine

+0

你能为我们创造一个片断或箱？这将是更容易为我们帮你呀.. –

+0

问题已被更新 –