CSS анимация от 0 до 100 - PullRequest
Новая
       10

CSS анимация от 0 до 100

0 голосов
/ 21 марта 2019

Вот что я хочу сделать: я хочу воспроизвести анимацию на элементе div, который начинается с ширины: от 0 до ширины: 100 ватт, затем возвращается к 0, но когда он возвращается к ширине 0, и я хочу анимировать из слева направо, как «непрерывная» анимация, а не «реверс». Как и в середине анимации, вы можете увидеть div, но когда он вернется к ширине 0, он должен исчезнуть слева направо (как в начале). Я не знаю, как это объяснить лучше ... 

div {
  position: fixed;
  z-index: 100;
  background: red;
  width: 0;
  height: 100vh;
  top: 0;
  left: 0;
  animation: 1s in-out forwards;
}

@keyframes in-out {
  0% {
    width: 0;
  }
  50% {
    width: 100vw;
  }
  100% {
    width: 0;
    /* but starting to "disappear" from left to right, just like the way it appears */
  }
}
<div></div>

1 Ответ

6 голосов
/ 21 марта 2019

изменить left:0 на right:0 в середине анимации: 

div.box {
  position: fixed;
  z-index: 100;
  background: red;
  width: 0;
  height: 100vh;
  top: 0;
  left: 0;
  animation: 1s in-out forwards;
}

@keyframes in-out {
  0% {
    width: 0;
  }
  50% {
    width: 100vw;
    left:0;
    right:auto;
  }
  50.1% {
    left:auto;
    right:0;
  }
  100% {
    width: 0;
    left:auto;
    right:0;
  }
}
<div class="box"></div>

Вы также можете упростить использование только left / right: 

div.box {
  position: fixed;
  z-index: 100;
  background: red;
  height: 100vh;
  top: 0;
  left: 0;
  animation: 1s in-out forwards;
}

@keyframes in-out {
  0% {
    left:0;
    right:100%;
  }
  50% {
    left:0;
    right:0;
  }
  100% {
    left:100%;
    right:0;
  }
}
<div class="box"></div>

Вы также можете сделать это без изменения ширины, если вам нужен только визуальный эффект: 

div.box {
  position: fixed;
  z-index: 100;
  background: red;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  animation: 1s in-out forwards;
}

@keyframes in-out {
  0% {
    transform:translateX(-100%);
  }
  45%,55% { /*to stay a while full width*/
    transform:translateX(0);
  }
  100% {
    transform:translateX(100%);
  }
}
<div class="box"></div>

Другая идея с использованием scale(): 

div.box {
  position: fixed;
  z-index: 100;
  background: red;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  animation: 1s in-out forwards;
}

@keyframes in-out {
  0% {
    transform:scaleX(0);
    transform-origin:left;
  }
  45% {
    transform:scaleX(1);
    transform-origin:left;
  }
  55% { 
    transform:scaleX(1);
    transform-origin:right;
  }
  100% {
    transform:scaleX(0);
    transform-origin:right;
  }
}
<div class="box"></div>

Также с rotation()

div.box {
  position: fixed;
  z-index: 100;
  background: red;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  animation: 1s in-out forwards;
}

@keyframes in-out {
  0% {
    transform:rotateY(-90deg);
    transform-origin:left;
  }
  45% {
    transform:rotateY(0deg);
    transform-origin:left;
  }
  55% { 
    transform:rotateY(0deg);
    transform-origin:right;
  }
  100% {
    transform:rotateY(-90deg);
    transform-origin:right;
  }
}
<div class="box"></div>
...