Moving Dotted Border Using CSS

Moving dotted border using CSS

This depends on what exactly you want the animation to look like.

In general, the styles given to you by border-style are rendered statically; it's simply not possible to animate them.

Even with CSS3, your options are fairly limited. The best you can do with border-image is either with a carefully-crafted animated GIF (again, it would depend on how a browser implements border-image with animated images), or with a gradient animation — and whichever you choose depends on browser compatibility and how you want your effect to look.

Otherwise you can experiment with ::before and ::after pseudo-elements to achieve your desired effect.

As a word of warning, though, unless you can ensure your animation meets the relevant WCAG guidelines, in particular 2.2.2 and 2.3, I strongly advise against especially going for the animated-GIF look. On top of being dangerous to certain people, a poorly-crafted animation may turn out more annoying than helpful to most — this is what made animated GIFs so infamous back in the day.

In other words, use this technique sparingly, and only when you know it adds to the user experience rather than taking away from it.

Dashed border animation in css3 animation

This much is possible with CSS and is pretty simple when using multiple backgrounds and changing their positions using animations.

.border {

  height: 100px;

  width: 200px;

  background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%);

  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;

  background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;

  background-position: 0px 0px, 212px 116px, 0px 116px, 216px 0px;

  padding: 10px;

  transition: background-position 2s;

}

.border:hover{

    background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="border">Some text</div>

How to make a moving dashed border with CSS?

There is a somewhat convoluted workaround to achieve a similar effect using an animated .gif as the background of a div, with whatever content you wanted "bordered" placed in a second div nested within the first with a 1px margin.

The animated .gif should be a small square (8px x 8px) with 3px-wide diagonal lines moving across it from left to right (you can adjust the sizes to adjust the width of the lines). When only a pixel's width or height of this image is visible, it appears to be a moving dashed border.

This technique is detailed here by Matthew Taylor at his blog: http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page.

How to animated rounded dashed border?

Thanks for your answer I got the solution -

.line-box {

    top:10px;

    left: 10px;

    overflow: hidden;

    position: absolute;

    display: block

}

.line-box svg {

    position: relative;

    top: -24px;

}

.path {

  animation: dash 20s linear  infinite;

  -moz-animation: dash 20s linear  infinite;

  -webkit-animation: dash 20s linear  infinite;

  -o-animation: dash 20s linear  infinite;

  -ms-animation: dash 20s linear  infinite;

}

@keyframes dash {

  from {stroke-dashoffset: 0;}

  to {stroke-dashoffset: 2000;}

}

@-moz-keyframes dash {

  from {stroke-dashoffset: 0;}

  to {stroke-dashoffset: 2000;}

}

@-webkit-keyframes dash {

  from {stroke-dashoffset: 0;}

  to {stroke-dashoffset: 2000;}

}

@-o-keyframes dash {

  from {stroke-dashoffset: 0;}

  to {stroke-dashoffset: 2000;}

}

@-ms-keyframes dash {

  from {stroke-dashoffset: 0;}

  to {stroke-dashoffset: 2000;}

}

<div class="line-box">

 <svg height="70" width="400">

  <path d="M167,1 h181 a20,20 0 0 1 20,20 v27 a20,20 0 0 1 -20,20 h-50 a20,20 0 0 1 -20,-20 v-27 a20,20 0 0 1 20,-20 z" fill="#ffb08f" stroke="#fff" stroke-width="1"/>

  <path stroke-dasharray="6,6" d="M167,1 h181 a20,20 0 0 1 20,20 v27 a20,20 0 0 1 -20,20 h-50 a20,20 0 0 1 -20,-20 v-27 a20,20 0 0 1 20,-20 z" fill="#ffb08f" stroke="#000" stroke-width="1" class="path"/>

  <path d="M21,2 h273 a20,20 0 0 1 20,20 v27 a20,20 0 0 1 -20,20 h-271 a20,20 0 0 1 -20,-20 v-27 a20,20 0 0 1 20,-20 z" fill="#ffb08f" stroke="#fff" stroke-width="1"/>

  <path stroke-dasharray="6,6" d="M21,2 h273 a20,20 0 0 1 20,20 v27 a20,20 0 0 1 -20,20 h-271 a20,20 0 0 1 -20,-20 v-27 a20,20 0 0 1 20,-20 z" fill="#ffb08f" stroke="#000" stroke-width="1" class="path"/>

 </svg> 

</div>

CSS border animation - convert solid lines to dotted lines

.circle {

  border-radius: 50%;

  width: 50px;

  height: 50px;

  border: 2px dotted transparent;

  border-right-color: transparent;

  border-left-color: transparent;

  border-bottom-color: transparent;

  border-top-color: transparent;

  animation-name: spin;

  animation-duration: 1s;

  animation-iteration-count: 1;

  animation-timing-function: linear;

  animation-fill-mode: forwards;

  position: relative;

  margin: 30px auto;

}

@keyframes spin {

  0% {

    transform: rotate(0deg);

  }

  25% {

    border-right-color: red;

  }

  50% {

    border-bottom-color: red;

  }

  75% {

    border-left-color: red;

  }

  100% {

    border-top-color: red;

    border-left-color: red;

    border-bottom-color: red;

    border-right-color: red;

    transform: rotate(360deg);

  }

}

<div class="circle"></div>

Making a circle with dotted border in css and animating on hover

You need CSS Animations.

In your HTML code, put the follow class:

<div class="rotate">
 <!-- The content -->
</div>

And in your CSS file, add these rules (this example is only for webkit):

div:hover {
     -webkit-animation: rotate 2s linear infinite;
}

@-webkit-keyframes rotate {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(180deg);
    }
}

Here's a DEMO

Cheers, Leo

If you want to works in Firefox, just add the respective vendor prefixes.

HTML5 animations creating a dashed border that smoothly moves inward on hover

You can try like below:

.box {
  height: 100px;
  background: yellow;
  position: relative;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 3px;
  border: 2px dashed pink;
  transition: 0.5s;
}

.box:hover::before {
  margin: 10px;
}

<div class="box">

</div>

---

Related Topics