Creating an animated border using flexbox

Question

I am looking to see if it is possible to create an animated 'shimmer' effect on a flexbox. The 'panels' have to be able to change shape to accommodate 1 line of text to 3 or 4 lines of text. I was wondering if this might require javascript or jquery rather than pure CSS. This will also have to be responsive to be able to work on a mobile screen as well as a desktop.

.panel-container {
  display: flex;
  width: 100vw;
}

.profile-panels {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100vw;
  margin: 20px 0 0 0;
}

.profile-smaller-panel h4 {
  margin: 0 0 0 0;
  padding: 16px 0 0 0;
  font-family: Arial;
  font-size: 16px;
}

.profile-smaller-panel {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
}

.profile-blocks {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-family: 'therestone', 'Roboto', 'Arial';
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%), 0 3px 5px 0 rgb(0 0 0 / 20%);
  max-width: 200px;
  cursor: pointer;
  border-radius: 4px;
  padding: 5px 10px;
}

<div class="panel-container">
  <div class="profile-panels">
    <div class="profile-smaller-panel">
      <div class="profile-blocks" tabindex="1">Lorem ipsum dolor sit</div>
    </div>
    <div class="profile-smaller-panel">
      <div class="profile-blocks" tabindex="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
    <div class="profile-smaller-panel">
      <div class="profile-blocks" tabindex="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget pharetra lacus, sit amet elementum velit</div>
    </div>
    <div class="profile-smaller-panel">
      <div class="profile-blocks" tabindex="4">Lorem ipsum dolor sit amet. Etiam eget pharetra lacus, sit amet elementum velit</div>
    </div>
  </div>
</div>

"*[Is it] possible to create an animated 'shimmer' effect on a flexbox*" - almost certainly "yes," but it does depend on what you mean by an "animated 'shimmer' effect;" can you detail that for us so we know what you want to achieve? — David Thomas, May 02 '23 at 10:41
Your question is not elaborative, what you have and what you need should be mentioned in question. — Kondaveti Charan, May 02 '23 at 10:47
sorry...guess a bit more clarification is better... a 'shimmer effect' would be an animated border effect (multi-color) running around the main flex panel, also note that there is going to be a background image added into the flexbox. The border would probably be around 2 or 3 pixels in width — MikeC, May 02 '23 at 11:02

Gykonik · Answer 1 · 2023-05-03T09:11:55.360

As the others stated in the comments, your question isn't all that clear. I'm also not entirely sure, what you mean by "shimmer" effect. However, I assume that you meant something like a "light gray bar" animating across the div.

I've slightly adjusted your code to achieve this. I think the easiest way is to use a simple pseudo-element, put on a linear gradient, and animate this.

By doing it that way, it is pretty flexible, sufficient for your use-case, and has good browser coverage (in contrast to other things like using masks as in this example).

.panel-container {
  display: flex;
  width: 100vw;
}

.profile-panels {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100vw;
  margin: 20px 0 0 0;
}

.profile-smaller-panel h4 {
  margin: 0 0 0 0;
  padding: 16px 0 0 0;
  font-family: Arial;
  font-size: 16px;
}

.profile-smaller-panel {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
}

.profile-blocks {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: relative;
  justify-content: center;
  align-items: center;
  font-family: 'therestone', 'Roboto', 'Arial';
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%), 0 3px 5px 0 rgb(0 0 0 / 20%);
  max-width: 200px;
  cursor: pointer;
  border-radius: 4px;
  padding: 5px 10px;
  overflow: hidden;
}

/* 
Selector to only have the animation on focus:
.shimmer:focus-visible::before
*/
.shimmer::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 200%;
  height: 100%;
  background: linear-gradient(-60deg,
      rgba(255, 255, 255, 0.2) 40%,
      rgba(80, 80, 80, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 60%);
  background-repeat: no-repeat;
  animation: shimmer 4s infinite linear;
}

@keyframes shimmer {
  0% {
    transform: translateX(-75%);
  }

  100% {
    transform: translateX(50%);
  }
}

<div class="panel-container">
  <div class="profile-panels">
    <div class="profile-smaller-panel">
      <div class="profile-blocks shimmer" tabindex="1">Lorem ipsum dolor sit</div>
    </div>
    <div class="profile-smaller-panel">
      <div class="profile-blocks shimmer" tabindex="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
    <div class="profile-smaller-panel">
      <div class="profile-blocks shimmer" tabindex="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget pharetra lacus, sit amet elementum velit</div>
    </div>
    <div class="profile-smaller-panel">
      <div class="profile-blocks shimmer" tabindex="4">Lorem ipsum dolor sit amet. Etiam eget pharetra lacus, sit amet elementum velit</div>
    </div>
  </div>
</div>

Edit:

As asked in the comment, I added the necessary selector to only show the animation on focus.

HI, this is working quite nicely, many thanks for that. i was also wondering if it is possible to only add the above effect into the :onfocus class? .profile-blocks:focus { background-color:#4ee654; background-image: none; background-size: 15em 6em; background-position: center -8px; background-repeat: no-repeat; } — MikeC, May 03 '23 at 09:04
I've added a selector for this. I would use `focus-visible` instead of `on-focus`, I think it's more accessible. — Gykonik, May 03 '23 at 09:12

Creating an animated border using flexbox

1 Answers1

Edit: