движение влево-вправо .. только очень общий CSS - PullRequest
Новая
       7

движение влево-вправо .. только очень общий CSS

0 голосов
/ 29 июня 2018

Я хотел бы написать общую анимацию CSS, чтобы переместить div вправо и влево, касаясь краев контейнера ... для простого применения к любому div, о котором я ничего не знаю, кроме того, что он имеет абсолютное позиционирование .

Проблема в том, что просто оставив значение 0%, а затем 100% ... на несколько секунд исчезнет, ​​я должен использовать что-то вроде calc (100% -width) .. Установка 50% -ого ключевого кадра - почти то, что я хотел бы, но есть замедление, и оно не очень плавное и линейное ... Любые предложения, учитывая, что я не знаю, как долго будет мой div, и я не работаю с js / jquery, а только с css ..?

https://codepen.io/alemarch/pen/vrvgMo

 @keyframes destraSinistra {
  0% {
    left: 0%;
    color: black;
    right: unset;
  }
  50% {
    left:50%;
    right: 50%;
  }

  100% {
    left:unset;
    right: 0px;
    color: green;
  }
}


#div1 {
  position: absolute;
  border: solid 1px lightgray;
  width: 100px;
  top: 200px;
  height: 30px;
  background-color: lightgreen;
  animation-name: destraSinistra;
  animation-duration: 4s; 
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate-reverse 
}

1 Ответ

0 голосов
/ 29 июня 2018

Используйте transform в сочетании с left или right, чтобы избежать добавления фиксированного значения: 

@keyframes destraSinistra {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
    transform:translateX(-100%);
  }
}


#div1 {
  position: absolute;
  border: solid 1px lightgray;
  width: 100px;
  height: 30px;
  background-color: lightgreen;
  animation: destraSinistra 1s linear infinite alternate
}
<div id="div1"></div>
...