CODEWITHSUNDEEP
csswebkit
KashCSS
KashCSS

Reputation: 175

WebKit Scale Transformation issue

I need help on webkit scale functionality.

I have a .css file with properties as shown :

@-webkit-keyframes expand 
{
  from {-webkit-transform:scale(1)}
  to {-webkit-transform:scale(1.2)}
}

.image-highlight
{
   -webkit-animation-name: expand;
   -webkit-animation-duration:0.2s;
   -webkit-animation-iteration-count:1;
   -webkit-animation-timing-function:ease;
}

I have a html with elements :

  <div id="slider">
    <img src="images/blueMarble_0.PNG" />
    <img src="images/blueMarble_1.PNG" />
    <img src="images/blueMarble_2.PNG" />
    <img src="images/blueMarble_3.PNG" />
    <img src="images/blueMarble_4.PNG" />
  </div>

I have a js file with a function which will animate(scale) the middle image of the array. and I am using this jQuery statement to do the animation: 

 `$(pic[2]).addClass('image-highlight');`

This jquery actually scales the image (pic[2]). But scaling happens for 0.2 secs and it scales down to original size. How can I retain the scaling even after completion of 0.2 secs? I don't want to resize it to original size. Can it be done without changing the animation duration? Please can you help me on this?

Upvotes: 0

Views: 1254

Answers (1)

skyline3000
skyline3000

Reputation: 7913

I believe you want to add to your class: -webkit-animation-fill-mode: both

This will cause the animation's initial keyframe to be shown immediately when your image-highlight class is applied and the final keyframe will continue to be shown after the animation finishes.

Other values you can use:

  • none - the effects of the animation are apparent only during the defined duration of the animation. (default)
  • backwards – the animation’s initial keyframe is applied as soon as the animation style is applied to an element. This only affects animations that have a nonzero value for -webkit-animation-delay.
  • forwards – the animation’s final keyframe continues to apply after the final iteration of the animation completes.

-webkit-animation-fill-mode: forwards will probably also meet your needs.

Upvotes: 1

Related Questions