更改CSS动画锚点

Question

I have the following page (see image)

When I click the red button, I want a div to animate when it shows to the user. However, I want the animation to come from the button. Right now the animation comes from the center of the page.

Here's the code I have

@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;
}

When I click on the red circle, the user sees an overlay page (which is actually a div with class overlay that is absolutely positioned). I add fade-scale-in class to the div (with class overlay). The div then transitions from the center of the screen and grows to fit the user's screen. I want it so that the div transitions from the red circle. Can I use transforms to make this happen?

Here's the code. As you notice, when you click on the yellow circle, the div animates from the center and not from the yellow circle: https://jsfiddle.net/e4g71y4m/3/

Answer 1

You can do this by adding transform-origin: top left; to the .overlay element. (Don't forget the prefixes ( -webkit , -moz etc.)

 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>