Why Does My Transform Snap Back

Why does my Transform snap back?

Cause and Solution:

CSS Transforms generally cannot be applied to elements that have display: inline setting. While it is strange that the transform does seem to happen initially before snapping back, the solution would be to change the setting to display: inline-block like in the below snippet.

.blockquote {  font-family: "Open Sans", Verdana, Arial, sans-serif;  font-size: 30px;  line-height: 60px;  width: 100%;  background-color: rgba(0, 0, 0, 0.16);  /*rgba(192, 241, 247, 0.15);*/  height: 100px;  text-align: center;  padding-top: 40px;  color: white;  font-weight: 300;  font-style: italic;  transition: all 250ms ease-in-out;}.blockquote .blockquote2 {  transition: all 250ms ease-in-out;  font-size: 25px;  line-height: 35px;  width: 90%;}.blockquote .author {  display: inline-block;  margin-left: -150px;  transition: all 250ms ease-in-out;  font-family: "Roboto", sans-serif;  color: #838eca;  text-transform: uppercase;  font-size: 20px;  letter-spacing: 2px;  line-height: 35px;  opacity: 0;}.blockquote:hover .blockquote2 {  transform: translateX(-20px);  transition: all 250ms ease-in-out;}.blockquote:hover .author {  opacity: 1;  font-weight: 900;  color: rgb(25, 137, 228);  transform: translateX(200px);  transition: all 250ms ease-in-out;}

<div class="blockquote">  <div class="blockquote2"> <b>雕刻</b>自己的路    <p class="author">- Jason Zhang</p>  </div></div>

Button snaps back after transform transition on hover

Seems to work OK with a container, if you monitor :hover on the container, then transform the button. And you only need to define transition and transform once each.

.btn {  display: inline-block;  transition: transform 50ms ease;}
div:hover .btn {  transform: translate(0px, -5px);}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/><div>  <button class="ui button btn"> That rocks!</button></div>

CSS transform transition on hover snaps back to default size

Add display: inline-block to your style definition for .reveal a:not(.image) and it should work.

CSS Translate snaps back on Hover Off even using inline-block

Everything Hunter Fraizer said gave me the clue to where was the issue here. Apparently, adding a :hover to a selector means that the transform will take place once it's hover over it, but when it's not, the transformation doesn't take place so it is necessary to add a transformation "back to the origin", which I did by adding the transition so it's not just "translated back in a blink". Please check out the original link for the jsfiddle to get the updated version.

.align-middle {  vertical-align: middle !important;}.text-muted {  color: #6c757d !important;}.text-center {  text-align: center !important;}.badge-info {  color: #fff;  background-color: #17a2b8;  border-color: #17a2b8;}.domain-info-group {  display: inline-block;  width: 6.5em;  height: 6.5em;  position: absolute;  top: 30%;  left: 30%;  -webkit-transform: translate(-30%, -30%);          transform: translate(-30%, -30%);  transition: all 1s ease-out 0.1s}
.domain-cluster {  width: 50em;  height: 50em;  position: absolute;  top: 30%;  left: 30%;  -webkit-transform: translate(-30%, -30%);          transform: translate(-30%, -30%);}
.domain-name {  opacity: 0;}
.domain-circle {  border-radius: 50%;  width: 1.6em;  height: 1.6em;  font-size: 4em;  transition: box-shadow 1.2s ease-in-out 0.1s;}
.domain-cluster:hover .domain-info-group:nth-child(1) {  -webkit-transform: translate(0);          transform: translate(0);  transition: all 1s ease 0.1s;}.domain-cluster:hover .domain-info-group:nth-child(1) .domain-name {  opacity: 1;  transition: opacity 1s ease-in-out;}.domain-cluster:hover .domain-info-group:nth-child(1) .domain-circle {  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}
.domain-cluster:hover .domain-info-group:nth-child(2) {  -webkit-transform: translate(-10em, 0em);          transform: translate(-10em, 0em);  transition: all 1s ease 0.2s;}.domain-cluster:hover .domain-info-group:nth-child(2) .domain-name {  opacity: 1;  transition: opacity 1s ease-in-out;}.domain-cluster:hover .domain-info-group:nth-child(2) .domain-circle {  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}
.domain-cluster:hover .domain-info-group:nth-child(3) {  -webkit-transform: translate(10em, 0em);          transform: translate(10em, 0em);  transition: all 1s ease 0.3s;}.domain-cluster:hover .domain-info-group:nth-child(3) .domain-name {  opacity: 1;  transition: opacity 1s ease-in-out;}.domain-cluster:hover .domain-info-group:nth-child(3) .domain-circle {  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}
.domain-cluster:hover .domain-info-group:nth-child(4) {  -webkit-transform: translate(0em, -10em);          transform: translate(0em, -10em);  transition: all 1s ease 0.4s;}.domain-cluster:hover .domain-info-group:nth-child(4) .domain-name {  opacity: 1;  transition: opacity 1s ease-in-out;}.domain-cluster:hover .domain-info-group:nth-child(4) .domain-circle {  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}
.domain-cluster:hover .domain-info-group:nth-child(5) {  -webkit-transform: translate(0em, 10em);          transform: translate(0em, 10em);  transition: all 1s ease 0.5s;}.domain-cluster:hover .domain-info-group:nth-child(5) .domain-name {  opacity: 1;  transition: opacity 1s ease-in-out;}.domain-cluster:hover .domain-info-group:nth-child(5) .domain-circle {  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}
.domain-cluster:hover .domain-info-group:nth-child(6) {  -webkit-transform: translate(-7.5em, -7.5em);          transform: translate(-7.5em, -7.5em);  transition: all 1s ease 0.6s;}.domain-cluster:hover .domain-info-group:nth-child(6) .domain-name {  opacity: 1;  transition: opacity 1s ease-in-out;}.domain-cluster:hover .domain-info-group:nth-child(6) .domain-circle {  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}
.domain-cluster:hover .domain-info-group:nth-child(7) {  -webkit-transform: translate(7.5em, -7.5em);          transform: translate(7.5em, -7.5em);  transition: all 1s ease 0.7s;}.domain-cluster:hover .domain-info-group:nth-child(7) .domain-name {  opacity: 1;  transition: opacity 1s ease-in-out;}.domain-cluster:hover .domain-info-group:nth-child(7) .domain-circle {  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}
.domain-cluster:hover .domain-info-group:nth-child(8) {  -webkit-transform: translate(7.5em, 7.5em);          transform: translate(7.5em, 7.5em);  transition: all 1s ease 0.8s;}.domain-cluster:hover .domain-info-group:nth-child(8) .domain-name {  opacity: 1;  transition: opacity 1s ease-in-out;}.domain-cluster:hover .domain-info-group:nth-child(8) .domain-circle {  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}
.domain-cluster:hover .domain-info-group:nth-child(9) {  -webkit-transform: translate(-7.5em, 7.5em);          transform: translate(-7.5em, 7.5em);  transition: all 1s ease 0.9s;}.domain-cluster:hover .domain-info-group:nth-child(9) .domain-name {  opacity: 1;  transition: opacity 1s ease-in-out;}.domain-cluster:hover .domain-info-group:nth-child(9) .domain-circle {  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}

<div class="domain-cluster">  <div class="domain-info-group text-center">    <div class="domain-circle badge-info text-center align-middle" data-value="2">       Pe    </div>    <div class="domain-name text-muted">      Personal    </div>  </div>  <div class="domain-info-group text-center">    <div class="domain-circle badge-info text-center align-middle" data-value="3">       Fa    </div>    <div class="domain-name text-muted">      Family    </div>  </div>  <div class="domain-info-group text-center">    <div class="domain-circle badge-info text-center align-middle" data-value="4">       Wo    </div>    <div class="domain-name text-muted">      Work    </div>  </div>  <div class="domain-info-group text-center">    <div class="domain-circle badge-info text-center align-middle" data-value="5">       Sp    </div>    <div class="domain-name text-muted">      Spiritual    </div>  </div></div>

CSS 3 - Scale transition snaps back in google chrome

Try using inline-block instead of inline (also, it's recommended to add compatibility to the rest of the browsers as well).

CSS:

.big {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    display: inline-block;
}
.big:hover {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
}

HTML:

<h1 class="big">Typo</h1>

Test it here: http://jsfiddle.net/XbUC8/

CSS3 Animation Snap Back

You can achieve what you're after using a transition rather than an animation (which seems more relevant anyway as it's a hover event). I've forked your example: http://jsfiddle.net/cherryflavourpez/fxL8U/

Why Does My Transform Snap Back