CODEWITHSUNDEEP
htmlcssanimation
FlyingCat
FlyingCat

Reputation: 14250

how to change size of the element using css?

I am trying to do transform a image using css keyframe

I have something like

@-webkit-keyframes blinkscale {
    0% {    
        transform: scale(1,1)
    }
    50% {        
        transform: scale(0.1,0.1)
    }
    100% {        
        transform: scale(3,3)
    }
}

.addScale {
    -webkit-animation: blinkscale 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: blinkscale 2s;
    -moz-animation-iteration-count: infinite;
    -o-animation: blinkscale 2s;
    -o-animation-iteration-count: infinite;
}

html

   <img src='test.jpg' class='addScale' />

It works if I change my keyframe to 

@-webkit-keyframes blinkscale {
   0% {background: yellow;}
  50% {background: green;} 
  100% {background: blue;}
}

but not the scale one. Can anyone help me about it? Thanks a lot!

Upvotes: 0

Views: 138

Answers (2)

jonsuh
jonsuh

Reputation: 2875

This should do it for you. Just have to make sure the vendor prefixes persist.

CSS:

@-webkit-keyframes blinkscale {
    0% {    
        -webkit-transform: scale(1,1)
    }
    50% {        
        -webkit-transform: scale(0.1,0.1)
    }
    100% {        
        -webkit-transform: scale(3,3)
    }
}

Also to note, you have -moz- and -o- animation set to .addScale so be sure to set keyframes to accommodate all those vendor prefixes and don't forget the standard animation as well.

Upvotes: 2

Barret LaPlante
Barret LaPlante

Reputation: 141

This link here should be of use Keyframe Animations

Maybe you haven't included the proper browser help, in the webkit keyframes blinkscale, I only see the help for mozilla,.

Upvotes: 1

Related Questions