CSS Animation - Grow from Center (Zoom from Center Dot to Full Container)

CSS Animation - Grow from center (Zoom from center dot to full container)

You should use transform in the animation for better performance and more control. Then you won't have to repeat the static px values, and you can use transform-origin to control where the transform happens. scale() will scale from the center by default.

div {  background: red;  animation: createBox .25s;  width: 98px; height: 98px;}@keyframes createBox {  from {    transform: scale(0);  }  to {    transform: scale(1);  }}

<div></div>

Expand div from the middle instead of just top and left using CSS

The key is to transition the margin by a formula. There is a little "wiggle" that is annoying during the transition if it is floated.

EDITED ADDING OPTIONS

Option 1: Expands within space reserved around it http://jsfiddle.net/xcWge/14/:

#square {
    width: 10px;
    height: 10px;
    margin: 100px; /*for centering purposes*/
    -webkit-transition: width 1s, height 1s, margin 1s;
    -moz-transition: width 1s, height 1s, margin 1s;
    -ms-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    width: 100px;
    height: 100px;
    margin: 55px; /* initial margin - (width change (and/or height change)/2), so here 100px is initial margin, and the change is (100px final W/H - 10px initial W/H = 90px change, so 100px - (90px / 2 [= 45px]) = 55px) */
}

Option 2: Expands over elements around it http://jsfiddle.net/xcWge/18/:

#square {
    width: 10px;
    height: 10px;
    margin: 0; /*for centering purposes*/
    -webkit-transition: width 1s, height 1s, margin 1s;
    -moz-transition: width 1s, height 1s, margin 1s;
    -ms-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    width: 110px;
    height: 110px;
    margin: -50px; /* 0 - (110px - 10px [= 100px]) / 2 =  -50px */
}

Option 3: Expands over elements before it in flow and shifts elements after it http://jsfiddle.net/xcWge/22/:

#square {
    width: 10px;
    height: 10px;
    margin: 0;
    position: relative;
    top: 0;
    left: 0;
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ;
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
    width: 110px;
    height: 110px;
    top: -50px; /* initial top[0] - (new height[110px] - initial height[10px] [=100px])/2 [=50px] = -50px) */
    left: -50px; /* initial left[0] - (new width[110px] - initial width[10px] [=100px])/2 [=50px] = -50px) */
    margin-right: -50px;
    margin-bottom: -50px;
}

ADDED NON-SQUARE EXAMPLE

A comment was made this does not work for a non-square (same width/height), but that just means one has to adjust differently for each direction during the transition. So here is Option 2 (with non-square) that starts as a rectangle, and the width expands twice as much as the height (so changes rectangle shape even) during the transition: Expands over elements around it http://jsfiddle.net/xcWge/2131/

#rectangle {
    width: 110px;
    height: 10px;
    margin: 0; /*for centering purposes*/
    -webkit-transition: width 1s, height 1s, margin 1s;
    -moz-transition: width 1s, height 1s, margin 1s;
    -ms-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#rectangle:hover {
    width: 310px;
    height: 110px;
    margin: -50px -100px; /* initial margin - ((initial margin - width change (or height change))/2) */
}

If the width were only changing by 100px also (so from 110px to 210px), then just a margin: -50px would have still worked.

CSS spin animation doesn't start from center

That is because the element is positioned with a left offset. Remove the below line from the rules and it should start from center.

left: 100px;

Setting transform-origin: 50% 50% is not required because that is anyway the default setting.

.spinner {  position: relative;  top: 100px;  width: 40px;  height: 40px;  margin: 10px auto;  background-color: black;  z-index: 2;  border-radius: 100%;  animation: sk-scaleout 2.5s infinite ease-in-out;}@keyframes sk-scaleout {  0% {    width: 40px;    height: 40px;  }  100% {    width: 540px;    height: 540px;    opacity: 0;  }}

<div class="spinner"></div>

Animate a div to increase width and height, expanding outwards in all directions

Use clip-path

document.getElementById("circle").onclick = function(e){
  document.getElementById("circle").classList.add("animate")
  document.addEventListener("transitionend", function(){
  document.getElementById("circle").classList.remove("animate")
  });
};

#circle{
  width: 100px;
  height: 100px;
  background-color: black;
  position: absolute;
  inset:0;
  margin: auto;
  border-radius: 50%;
  clip-path: circle(20%);
  transition: .5s;
}

#circle.animate{
  clip-path: circle(50%)
}

<div id = "circle"><div>

android animation - make a view appear from center to the width of screen

solved! just for future reference. this is what I got

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale android:fromXScale="0.1" android:toXScale="1.0"
      android:fromYScale="1.0" android:toYScale="1.0"
      android:pivotX="50%" android:pivotY="100%"
      android:duration="2000" />
</set>

---

Related Topics