CODEWITHSUNDEEP
htmlcssanimationtransformscale
lala90
lala90

Reputation: 151

Transform Property CSS3 scale but stick at bottom

Did anyone know how to scale an image but stick with bottom? Below is my code, my images scale at middle, but I need them to stick at bottom. 

.animation_scale{
position:absolute;
top:150px;
left:55px;
display:block;
z-index:-10;
bottom : 0;}

.animation_scale img{
animation-name:animation_scale;
animation-duration:1s;
animation-timing-function:ease;
animation-delay:0s;
animation-iteration-count:1;
animation-direction:alternate;
animation-play-state:running;
animation-fill-mode: forwards;

    /* Firefox: */
-moz-animation-name:animation_scale;
-moz-animation-duration:1s;
-moz-animation-timing-function:ease;
-moz-animation-delay:0s;
-moz-animation-iteration-count:1;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
-moz-animation-fill-mode: forwards;

/* Safari and Chrome: */
-webkit-animation-name:animation_scale;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
-webkit-animation-fill-mode: forwards;}

@keyframes animation_scale {
0%   {
-webkit-transform:  scale(0.2) translate(0px);
-moz-transform:  scale(0.2) translate(0px);
-o-transform:  scale(0.2) translate(0px);}

100% {
-webkit-transform: scale(1.0) skew(0deg) translateY(-10px);
-moz-transform: scale(1.0) skew(0deg) translateY(-10px);
-o-transform: scale(1.0) skew(0deg) translateY(-10px);}}

@-moz-keyframes animation_scale /* Firefox */
{0%   {
-moz-transform:  scale(0.2) translate(0px);}

100% {
-moz-transform:  scale(1.0) translateY(-10px);}}

@-webkit-keyframes animation_scale{ /* Safari and Chrome */

0%   {
-webkit-transform:  scale(0.2) translate(0px);}

100% {
-webkit-transform:  scale(1.0) translateY(-10px);}}

Upvotes: 7

Views: 9422

Answers (2)

Armel Larcier
Armel Larcier

Reputation: 16027

Use transform-origin property on elements on which a transform is applied.

It defines the "center" point of the transformation :

-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;

or

-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
-o-transform-origin: center bottom;
transform-origin: center bottom;

See more : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

Upvotes: 6

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

Use transform-origin center bottom

Here is working DEMO

Upvotes: 13

Related Questions