CODEWITHSUNDEEP
cssanimationtransformcss-transitions
Dean
Dean

Reputation: 35

Centering a CSS transform (scale)

I have created a fiddle here, and just wondered how to go about centering the object - so that the heart is centered, and it scales outwards when you hover over it, rather than animating to the lower right.

@-webkit-keyframes beat {
0% {
-webkit-transform: scale(1);
-webkit-filter: drop-shadow(0 0 8px rgba(213, 9, 60, 0.7));
font-size: 90%;
color: #cc0404;
}

50% {
-webkit-transform: scale(1.1);
-webkit-filter: drop-shadow(0 0 15px rgba(213, 9, 60, 0.2));
font-size: 120%;
color: #e50505;
}

100% {
-webkit-transform: scale(1);
-webkit-filter: drop-shadow(0 0 8px rgba(213, 9, 60, 0.7));
font-size: 90%;
color: #cc0404;
}
}

.heart-box {
margin: 0 auto;
width: 90%;
padding-top: 20px;
cursor: pointer;
font-size: 15em;
-webkit-filter: drop-shadow(0 0 0 white);
-moz-filter: drop-shadow(0 0 0 white);
filter: drop-shadow(0 0 0 white);
}

.heart {
color: #e62020;
-webkit-transition: font-size 0.1s ease;
-moz-transition: font-size 0.1s ease;
transition: font-size 0.1s ease;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
transition: color 0.3s ease;
}

.heart:hover, .heart:focus {
-webkit-animation: beat 0.7s ease 0s infinite normal;
-moz-animation: beat 0.7s ease 0s infinite normal;
-ms-animation: beat 0.7s ease 0s infinite normal;
-o-animation: beat 0.7s ease 0s infinite normal;
animation: beat 0.7s ease 0s infinite normal;
}

http://jsfiddle.net/DBirkett/3DbTn/

Upvotes: 2

Views: 3439

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31715

Don't use a font-transition, just use a transform scale. And in order for that to work, you'll have to set display:inline-block on your span, since inline elements don't support transforms in webkit yet. You might not have noticed it, but those transforms in your original code are not having any effect in webkit browsers.

Something like this

@-webkit-keyframes beat {
  0% {
    -webkit-transform: scale(1);
    -webkit-filter: drop-shadow(0 0 8px rgba(213, 9, 60, 0.7));
    color: #cc0404;
  }

  50% {
    -webkit-transform: scale(2);
    -webkit-filter: drop-shadow(0 0 15px rgba(213, 9, 60, 0.2));
    color: #e50505;
  }

  100% {
    -webkit-transform: scale(1);
    -webkit-filter: drop-shadow(0 0 8px rgba(213, 9, 60, 0.7));
    color: #cc0404;
  }
}


.heart {
  display: inline-block;
  color: #e62020;
  -webkit-transition: font-size 0.1s ease;
  -moz-transition: font-size 0.1s ease;
  transition: font-size 0.1s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

Also, available in /7/ update to your original fiddle.

Upvotes: 1

Related Questions