Question 43337 in Html Question posted in
Some basic documentation can be found here.

css animation make an item flow into the block – Html

I need the red square to resize from scale (100) to scale(1). But now, at the beginning of the animation its scale is 1 and only then starts increasing to 100. Can I make the red box block not to be shown at the beginning of the animation with its original size?

https://codepen.io/alex-filippovich/pen/ExeJEEP

.container .box {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 0 auto;
}

.container .box {
  -webkit-animation-name: hideit;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-delay: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes hideit {
  0% {
    display: none;
    transform: scale(10)
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
<div class="container">
  <div class="box"></div>
</div>
Tags:

2

Answers


  1. 0

    First, understand that the animation is taking 1s to start because the delay of 1s you used. If you remove that the animation starts with the block hidden.

    But if you want to keep the delay, add the rule display: none to the .container .box selector and add display: block to the 50% and 100% steps of the animation.

    Login or Signup to reply.
  2. 0

    Set the box to opacity: 0; and start the animation with opacity: 1;

        .container .box {
      width: 200px;
      height: 200px;
      background-color: red;
      margin: 0 auto;  
      opacity: 0;
    }
    
    .container .box {
      -webkit-animation-name: hideit;
      -webkit-animation-duration: 1s;
      -webkit-animation-timing-function: ease-in;
      -webkit-animation-delay: 1s;
      -webkit-animation-iteration-count: 1;
      -webkit-animation-fill-mode: forwards;
    }
    
    @-webkit-keyframes hideit {
      0% { opacity: 1; transform: scale(10) }
      50% { opacity: 1; }
      100% { opacity: 0; }  
    }
      <div class="container">
    <div class="box"></div>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search