边框动画关键帧/CSS动画 [英] Border animation Keyframes/CSS Animation

问题描述

我有一个想要实现的动画，但我做得不好.我已经在互联网上搜索并找到了一些解决方案，但是它们的动画略有变化.

I have an animation that I want to achieve and I am not able to be getting it right. I've searched the internet and found some solutions, however they have a slight change in the animation.

我希望从左下角开始的边框动画先从左上角到右上角再从右下角到最后回到左下角.每个动画接连出现，并且一旦出现边框，之后应保持可见.

I want a border animation that starts at the bottom left goes to top left then top right then bottom right and finally back to bottom left. Each animation after another and the borders once appeared should stay visible afterwards.

这是我设法获得的代码: https://jsfiddle.net/gwbn427m/

This is the code I've managed to get: 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关键帧动画，也无法正确处理.

However I've tried it with those https://codepen.io/sean_codes/pen/YZWqLo keyframe animation and couldn't get it right either.

我真的很感谢您的帮助！

I really would appreciate any help!

推荐答案

要实现这一点，您将需要两个div，以便可以使用其伪元素:before 和创建四个不同的元素.:after ，然后使用 transition-delay 延迟 transition

To achieve that you will need two divs so that you can create four different elements using its pseudo elements :before and :after and then use transition-delay to delay the 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>

这篇关于边框动画关键帧/CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！