Граница анимации Ключевые кадры / CSS Animation - PullRequest
Новая
       7

Граница анимации Ключевые кадры / CSS Animation

0 голосов
/ 23 мая 2018

У меня есть анимация, которую я хочу достичь, и я не могу ее правильно понять.Я искал в интернете и нашел несколько решений, однако они немного изменили анимацию.

Мне нужна анимация границы, которая начинается слева внизу, идет вверху слева, затем вверху справа, затем внизу справа и, наконец, обратно внизу слева.Каждая анимация за другой и появившиеся границы должны оставаться видимыми впоследствии.

Вот код, который мне удалось получить: https://jsfiddle.net/gwbn427m/

div {
  width: 300px; 
  height: 200px;
  display: inline-block;
  padding: 30px;
  /*bottom: -25;*/
  position: relative;
  border: 0;
}

.draw {
  transition: color 0.25s;
}

.draw::before,
.draw::after {
  /* Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts*/
  border: 2px solid transparent;
  width: 0;
  height: 0;
  box-sizing: inherit;
  content: '';
  position: absolute;
}

/* This covers the top & right borders (expands right, then down)*/
.draw::before {
  left: 0;
  bottom: 0;
}

/* And this the bottom & left borders (expands left, then up) */
.draw::after {
  right: 0;
  top: 0;
}

.draw:hover {
  color: red;
}

/* Hover styles */
.draw:hover::before,
.draw:hover::after {
  width: 100%;
  height: 100%;
}

.draw:hover::before {
  border-top-color: res; /*Make borders visible */
  border-right-color: red;
  transition:
  width 0.25s ease-out 0.25s,  /* And then height */
  height 0.25s ease-out; /* Width expands first */
}

.draw:hover::after {
  border-bottom-color: red; /* Make borders visible */
  border-left-color: red;
  transition:
  border-color 0s ease-out 0.5s, /* Wait for ::before to finish before showing border*/			
  width 0.25s ease-out 0.75s, /* And finally height*/
  height 0.25s ease-out 0.5s; /*And then exanding width*/
}
<div class="draw">
  <a href="https://placeholder.com"><img src="http://via.placeholder.com/200x100"></a>
</div>

Однако я попробовал это с анимацией https://codepen.io/sean_codes/pen/YZWqLo ключевого кадра и не смог сделать это правильно.

Iдействительно буду признателен за любую помощь!

1 Ответ

0 голосов
/ 23 мая 2018

Для этого вам понадобятся два элемента div, чтобы вы могли создать четыре различных элемента, используя его псевдоэлементы :before и :after, а затем использовать transition-delay для задержки transition

.main {
  width: 200px;
  height: 200px;
  position: relative;
}

.item {
  height: 100%;
}

.main:before,
.main:after,
.item:before,
.item:after {
  content: "";
  position: absolute;
  background: red;
}

.main:before {
  width: 2px;
  height: 0;
  bottom: 0;
  left: 0;
}

.main:after {
  height: 2px;
  width: 0;
  top: 0;
  left: 0;
}

.item:before {
  width: 2px;
  height: 0;
  top: 0;
  right: 0;
}

.item:after {
  height: 2px;
  width: 0;
  right: 0;
  bottom: 0;
}

.main:hover:before {
  height: 100%;
  transition: all .5s linear;
}

.main:hover:after {
  width: 100%;
  transition: all .5s linear .5s;
}

.main:hover .item:before {
  height: 100%;
  transition: all .5s linear 1s;
}

.main:hover .item:after {
  width: 100%;
  transition: all .5s linear 1.5s;
}
<div class="main">
  <div class="item">
    Some Content
  </div>
</div>
...