Do not scale element border

css scale
object-fit
css transform scale to fit
css background image size to fit screen
css scale div proportionally
css scale div and contents
css image size scale to fit
scale div to fit screen

I'm using keyframe animation to make increasing transparent 1px-circle. But div border is increasing with width and height. Is there any way to make circle with not-increasing border?

$(document).on({
    click: function (e) {
        var d = document.createElement('div');
        d.className = 'clickEffect';
        d.style.width = '1px';
        d.style.height = '1px';
        d.style.top = `${e.clientY}px`;
        d.style.left = `${e.clientX}px`;
        document.body.appendChild(d);
        d.addEventListener('animationend', (() => {
            d.parentElement.removeChild(d);
        }).bind(this));
    }
});
div.clickEffect {
    position: fixed;
    border:1px solid #000;
    border-radius: 50%;
    z-index: 99999;
    animation: clickEffect 1s ease-out;
}

@keyframes clickEffect {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
        transform: scale(20);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
</body>
</html>

You must animate the height and width instead of the scale.

And to keep it centered, you must translate X and Y

So the code would look like this:

$(document).on({
    click: function (e) {
        var d = document.createElement('div');
        d.className = 'clickEffect';
        d.style.width = '1px';
        d.style.height = '1px';
        d.style.top = `${e.clientY}px`;
        d.style.left = `${e.clientX}px`;
        document.body.appendChild(d);
        d.addEventListener('animationend', (() => {
            d.parentElement.removeChild(d);
        }).bind(this));
    }
});
div.clickEffect {
    position: fixed;
    border:1px solid #000;
    border-radius: 50%;
    z-index: 99999;
    animation: clickEffect 0.5s ease-out;
}

@keyframes clickEffect {
    0% {
        opacity: 1;
    }

    100% {
		opacity: 0.5;
		transform: translateX(-20px) translateY(-20px);
		width: 40px;
		height: 40px;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
</body>
</html>

Resizing background images with background-size, The background-size CSS property lets you resize the background background​-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } scaled so that each side is as large as possible while not exceeding  The web is a fluid place. Different sized screens, yadda yadda yadda. Fortunately for us, the web is ready for it. Text wraps. CSS gives us control over how to size things. What we don’t get (easily, anyway) is a way to scale whole element (and it’s children) proportionally—retaining its exact layout as it changes size. We can do it though.

Animate width & height instead of scale.

$(document).on({
  click: function(e) {
    var d = document.createElement('div');
    d.className = 'clickEffect';
    d.style.width = '1px';
    d.style.height = '1px';
    d.style.top = `${e.clientY}px`;
    d.style.left = `${e.clientX}px`;
    document.body.appendChild(d);
    d.addEventListener('animationend', (() => {
      d.parentElement.removeChild(d);
    }).bind(this));
  }
});
div.clickEffect {
  position: fixed;
  border: 1px solid #000;
  border-radius: 50%;
  z-index: 99999;
  transform: translate(-50%,-50%);
  animation: clickEffect 1s ease-out;
}

@keyframes clickEffect {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
    //transform: scale(20);
    width: 20px;
    height: 20px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Scaled/Proportional Content with CSS and JavaScript, CSS gives us control over how to size things. What we don't get (easily, anyway) is a way to scale whole element (and it's children) proportionally—retaining its  The CSS box-sizing property allows us to include the padding and border in an element's total width and height. Without the CSS box-sizing Property By default, the width and height of an element is calculated like this:

Here is another idea that rely on translation and perspective to achieve a scale effect keeping the same border

$(document).on({
    click: function (e) {
        var d = document.createElement('div');
        d.className = 'clickEffect';
        d.style.top = `${e.clientY}px`;
        d.style.left = `${e.clientX}px`;
        document.body.appendChild(d);
        d.addEventListener('animationend', (() => {
            d.parentElement.removeChild(d);
        }).bind(this));
    }
});
div.clickEffect {
    position: fixed;
    border-radius: 50%;
    z-index: 99999;
    width:20px;
    height:20px;
    margin:-10px 0 0 -10px;
    border:1px solid #000;
    transform:perspective(200px) translateZ(-250px);
    animation: clickEffect 1s ease-out;
}

@keyframes clickEffect {
    0% {opacity: 1;}
    100% {opacity: 0.5; 
    transform:perspective(200px) translateZ(90px)}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Animating CSS Width and Height Without the Squish Effect • PQINA, We can only manipulate the pixels, not the contents of the element. the transform example the radius is not redrawn (like in the width example), it is simply scaled. .square { width: 200px; height: 200px; border-radius: 40px; }  If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px. border-box tells the browser to account for any border and padding in the values you specify for an element's width and height

CSS border-image-width property, Note: The border-image-width property can take from one to four values (top, right, bottom, and left sides). If the fourth value is omitted, it is the same as the  The border and text will print at their normal size while the design elements will print to the scale at which they were referenced to the sheet model. If you use this method to create your drawings, because they are all plotted at the same scale, it is very simple to use Batch Print to print sets of drawings in one step (refer to Batch Printing ).

CSS Transform Guide: Learn About CSS 3D Transform, The CSS transform: scale() property is for scaling elements. However, this is experimental and does not have the best browser support. padding: 1px; margin: 5px; border-radius: 100%; animation: roll 5s infinite; transform:  The sheet border can be attached as a reference to a sheet model, you need to just select the appropriate scale model and set the Master:Ref scale factor to 1:1. To associate border attachment to the sheet boundary, in the Model Properties dialog box, select the border graphics file from the Border Attachment drop-down.

Subverting Borders: Doing Research on Smuggling and Small-Scale Trade, Doing Research on Smuggling and Small-Scale Trade Bettina Bruns, Judith Miggelbrink Illegal elements of a transborder economic activity do not have to be  The height is 1px, not 0, otherwise the SVG may not be drawn at all (Firefox) or may not scale at all (Chrome). The preserveAspectRatio uses YMin for the vertical alignment, so that the graphic is aligned neatly against the top of the <svg> content area, spilling out into the bottom padding.

Comments
  • Not really, at least not with transform, you need to animate width and height @keyframes clickEffect { 0% { opacity: 1; width: 1px; height: 1px} 100% { opacity: 0.5; width: 20px; height: 20px}}. Its a little worse performace wise, but well, it works.
  • Performance is important for me. Is there any way to do such effect with scale only??
  • No, there is no way to achieve that with scale only.
  • Your solution has problems with performance - width and height animation works more slowly than scale
  • Yes, but using scale(), you cant scale heigth and width whitout scale the border size.
  • Your solution has problems with performance - width and height animation works more slowly than scale