Как сделать так, чтобы box-shadow анимация отскакивала от боков?Где я не прав? - PullRequest
Новая
       7

Как сделать так, чтобы box-shadow анимация отскакивала от боков?Где я не прав?

0 голосов
/ 24 февраля 2019

У меня есть подразделение (.Animate), свойство box-shadow которого анимируется.Я хочу, чтобы он отскочил от правой стороны, как тот, который я применил ко второму дивизиону (.Animate2).Пожалуйста, запустите фрагмент кода, чтобы увидеть анимацию.Необходимая анимация демонстрируется вторым делением.

Для второго деления я сделал требуемую анимацию с элементом :before, анимировав его ширину и левое поле.Но я бы хотел, чтобы исключить элемент псевдо.У меня есть код, в котором я пытаюсь скопировать ключевые кадры анимации WidthAni в ключевые кадры BoxShadowAni, но анимация обоих подразделений не одинакова.Чего мне не хватает?Где моя логика подводит меня?(Комментарии после ключевых кадров объясняют мою логику.)

Вот мой код: 

body {
  background: #222;
  color: #ddd;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: 3em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.Animate {
  box-shadow: 600px 0px #ddd inset;
  color: #222;
  padding: 0 0.5em;
  animation: BoxShadowAni 5.0s infinite linear;
}

.Animate2 {
  color: #222;
  padding: 0 0.5em;
  position: relative;
}

.Animate2:before {
  content: '';
  position: absolute;
  z-index: -1;
  background: #ddd;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: WidthAni 5.0s infinite ease-in-out;
}

@-webkit-keyframes BoxShadowAni {
  0% {box-shadow: 0px 0px #ddd inset;}/*Starts from left edge*/
  10% {box-shadow: 600px 0px #ddd inset;}/*To grow upto the left edge*/
  20% {box-shadow: -5px 0px #ddd inset;}/*To reduce in length upto the right edge*/
  25% {box-shadow: -5px 0px #ddd inset;}/*To stay for a while and then bounce back*/
  35% {box-shadow: -600px 0px #ddd inset;}/*Grow upto the right edge*/
  45% {box-shadow: 0px 0px #ddd inset;}/*To reduce in length upto the left edge*/
  100% {box-shadow: 0px 0px #ddd inset;}/*To insert a pause b4 animation loops back*/
}

@-webkit-keyframes WidthAni {
  0% {width: 0px}
  10% {width: 100%;left: 0;right: 0}
  20% {width: 5%;left: 95%;}
  25% {width: 5%;left: 95%;}
  35% {width: 100%;left: 0%;}
  45% {width: 0%;}
  100% {width: 0%;}
}
<div class='Animate'>BoxShadow</div>
<div class='Animate2'>Width Ani</div>

Ответы [ 2 ]

0 голосов
/ 25 февраля 2019

Я думаю, проблема в том, когда вы меняете тень на другую.Я предлагаю вам полагаться на несколько теней, чтобы добиться этого, и у вас будет лучшее рендеринг.Хитрость заключается в том, чтобы при смене тени вы всегда покрывали всю область.

Так что вместо перехода от 300px 0px #ddd inset к -300px 0px #ddd inset, где у вас будет мерцание, вы можете сделать это:

300px 0px #ddd inset,0px 0px #ddd inset до 300px 0px #ddd inset,-300px 0px #ddd inset, затем до 0px 0px #ddd inset,-300px 0px #ddd inset

body {
  background: #222;
  color: #ddd;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: 3em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.Animate {
  color: #222;
  padding: 0 0.5em;
  animation: BoxShadowAni 5.0s infinite linear;
}

.Animate2 {
  color: #222;
  padding: 0 0.5em;
  position: relative;
}

.Animate2:before {
  content: '';
  position: absolute;
  z-index: -1;
  background: #ddd;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: WidthAni 5.0s infinite ease-in-out;
}

@-webkit-keyframes BoxShadowAni {
  0% {
    box-shadow: 0px 0px #ddd inset, 0px 0px #ddd inset;
  }
  10% {
    box-shadow: 300px 0px #ddd inset,0px 0px #ddd inset;
  }
  10.1% {
    box-shadow: 300px 0px #ddd inset,-300px 0px #ddd inset;
  }
  10.2% {
    box-shadow: 0px 0px #ddd inset,-300px 0px #ddd inset;
  }
  20% {
    box-shadow: 0px 0px #ddd inset,-5px 0px #ddd inset;
  }
  25% {
    box-shadow: 0px 0px #ddd inset,-5px 0px #ddd inset;
  }
  35% {
    box-shadow: 0px 0px #ddd inset,-300px 0px #ddd inset;
  }
  35.1% {
    box-shadow: 300px 0px #ddd inset,-300px 0px #ddd inset;
  }
  35.2% {
    box-shadow: 300px 0px #ddd inset,0px 0px #ddd inset;
  }
  45%,100% {
    box-shadow: 0px 0px #ddd inset,0px 0px #ddd inset;
  }
}

@-webkit-keyframes WidthAni {
  0% {
    width: 0px
  }
  10% {
    width: 100%;
    left: 0;
    right: 0
  }
  20% {
    width: 5%;
    left: 95%;
  }
  25% {
    width: 5%;
    left: 95%;
  }
  35% {
    width: 100%;
    left: 0%;
  }
  45% {
    width: 0%;
  }
  100% {
    width: 0%;
  }
}
<div class='Animate'>BoxShadow</div>
<div class='Animate2'>Width Ani</div>
0 голосов
/ 24 февраля 2019

Хорошо, поэтому использование box-shadow кажется очень сложным способом сделать это, и его трудно манипулировать.

Если вы собираетесь использовать псевдокласс, просто создайте его с цветом фона и переместите его. Пример # 1 .

Если вам не нужен псевдокласс, анимировать фон, возможно, проще, поэтому вы можете сделать это с градиентом Пример # 2 , ноэто иногда может иметь размытый край.Таким образом, другой вариант - использовать изображение (закодированное и встроенное в base64, чтобы избежать каких-либо дополнительных файлов) Пример # 3 .

Наконец, приведенные выше решения требуют использования текста того же цвета, что ифон.НО есть свойство CSS, которое создано для этого: clip-path.В качестве бонуса он работает и для встроенных элементов ... Примеры 4 и 5 

body {
  padding: 30px;
  background-color: #333;
  color: #fff;
  font-family: Helvetica, Arial, Sans-Serif;
}

.reveal {
  margin-bottom: 10px;
  padding: 10px;
  text-align: center;
  width: 400px;
  border: 1px solid #ddd;
  color: #333;
}

.pseudo {
  overflow: hidden;
  position: relative;
}
.pseudo:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ddd;
  z-index: -1;
  -webkit-animation: pseudo 10s infinite ease-in-out;
          animation: pseudo 10s infinite ease-in-out;
}

@-webkit-keyframes pseudo {
  0% {
    -webkit-transform: translatex(-100%);
            transform: translatex(-100%);
  }
  50% {
    -webkit-transform: translatex(100%);
            transform: translatex(100%);
  }
  100% {
    -webkit-transform: translatex(-100%);
            transform: translatex(-100%);
  }
}

@keyframes pseudo {
  0% {
    -webkit-transform: translatex(-100%);
            transform: translatex(-100%);
  }
  50% {
    -webkit-transform: translatex(100%);
            transform: translatex(100%);
  }
  100% {
    -webkit-transform: translatex(-100%);
            transform: translatex(-100%);
  }
}
.background {
  background-image: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAAC1JREFUOBFjvHv37n8GKgImKpoFNmrUQMpDdDQMR8OQjBAYTTZkBBqalhEYhgAuSwO+G+SAowAAAABJRU5ErkJggg==");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: left top;
  -webkit-animation: background 5s alternate infinite ease-in-out;
          animation: background 5s alternate infinite ease-in-out;
}

@-webkit-keyframes background {
  0% {
    background-size: 0% 100%;
  }
  50% {
    background-size: 100% 100%;
    background-position: left top;
  }
  51% {
    background-size: 100% 100%;
    background-position: right top;
  }
  100% {
    background-size: 0% 100%;
    background-position: right top;
  }
}

@keyframes background {
  0% {
    background-size: 0% 100%;
  }
  50% {
    background-size: 100% 100%;
    background-position: left top;
  }
  51% {
    background-size: 100% 100%;
    background-position: right top;
  }
  100% {
    background-size: 0% 100%;
    background-position: right top;
  }
}
.gradient {
  background: linear-gradient(90deg, #dddddd 0%, #dddddd 50%, rgba(221, 221, 221, 0) 50.01%, rgba(221, 221, 221, 0) 100%);
  background-size: 200% 100%;
  -webkit-animation: gradient 5s alternate infinite ease-in-out;
          animation: gradient 5s alternate infinite ease-in-out;
}

@-webkit-keyframes gradient {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: -100% 0%;
  }
}

@keyframes gradient {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: -100% 0%;
  }
}
.clip {
  color: #4394ED;
  background: #ddd;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  -webkit-animation: clip 5s alternate infinite ease-in-out;
          animation: clip 5s alternate infinite ease-in-out;
}

@-webkit-keyframes clip {
  0% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  50% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}

@keyframes clip {
  0% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  50% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}
<h2>Text Reveal</h2>

<div class="reveal pseudo">Reveal Text (Pseudo Class)</div>

<div class="reveal gradient">Reveal Text (gradient)</div>

<div class="reveal background">Reveal Text (background-image)</div>

<div class="reveal clip">Reveal Text (clip-path)</div>

<span class="clip">Works on inline elements too...</span>
...