Fade in with transform scale, jQuery and CSS3

Question

I'm trying to create an effect where a box fades in, and "grows" a little as it fades in.

The box starts as display:none and transform: scale(0.8,0.8) so it's 0.2 smaller than the original.

As it fades, I want it to also scale up to be scale(1,1)

I am handling the fade-in after a delay of 5000 using jQuery, and I am then appending a new style to the box using jQuery.

I have transition: transform 1s; in place to handle the smooth transition from 0.8 to 1 but it doesn't seem to work.

$( document ).ready(function() {
    console.log( "ready!" );
    $(".modal-newsletter-wrap").delay(5000).fadeIn( "slow", function() {
  });
    $(".modal-newsletter").delay(6000).css( "transform", "scale(1,1)" );
});

And here is the CSS

.modal-newsletter{transition: transform 1s;transform:scale(0.8,0.8);position:fixed;}

JSFiddle included which shows it fading in (wait a few secs) but it fades in at full 1 size, not 0.8 .

https://jsfiddle.net/bpbd1mjp/1/

Answer 1

jQuery is not necessary, use instead a simple CSS3 animation: http://codepen.io/anon/pen/xbMWXL

@-webkit-keyframes overlay {
   0% { -webkit-transform: scale(.8); opacity: 0; }
   100%   { -webkit-transform: scale(1.1); opacity: 1; z-index: 1  }
}
@-moz-keyframes overlay {
   0% { -moz-transform: scale(.8); opacity: 0; }
   100%   { -moz-transform: scale(1.1); opacity: 1; z-index: 1   }
}
@keyframes overlay {
   0% { transform: scale(.8); opacity: 0; }
   100%   { transform: scale(1.1); opacity: 1;  z-index: 1   }
}

.modal-newsletter-wrap {
  width: 100px;
  height: 100px;
  background: #ccc;

  /* start with a negative z-index so the user may interact with the page 
     the actual z-index is set on the last animation keyframe */

  position: fixed;
  z-index: -1;

  opacity: 0;

  -webkit-transform: scale(.8);
  -webkit-animation: overlay 1s linear 5s 1 forwards;

  -moz-transform: scale(.8);
  -moz-animation: overlay 1s linear 5s 1 forwards;

  transform: scale(.8);
  animation: overlay 1s linear 5s 1 forwards;
}

The effect starts after a 5-seconds delay and the effect duration is set to 1 second. As it fades, the element scales to 1.1. The animation retains the last frame ( animation-fill-mode property is set to forwards )

Answer 2

i dont know if i got this right but you can try it this way the js:

$( document ).ready(function() {
    console.log( "ready!" );
    $(".modal-newsletter-wrap").delay(5000).fadeIn( "slow"
    ,function(){
         $(".modal-newsletter").css( "transform", "scale(1,1)" );
    $(".modal-newsletter").css( "-webkit-transform", "scale(1,1)" );
    $(".modal-newsletter").css( "-moz-transform", "scale(1,1)" );
    });

});

and alter this css:

.modal-newsletter{
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    -webkit-transform: scale(0.8,0.8);
    -moz-transform: scale(0.8,0.8);
    transform: scale(0.8,0.8);
    background-repeat:repeat-x;
    background-image:url(http://localhost/Eat-Sleep-Knit/wp-content/themes/KnittersParadise/img/stripe.png);
    position:fixed;
}

this is link

https://jsfiddle.net/bpbd1mjp/4/