Dashed Border Animation in CSS3 Animation

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>

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>

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>

How to make a smooth dashed border rotation animation like 'marching ants'

Cog and chain animation :

I totaly refactored the code (CSS and HTML), it is now :

  • shorter (especialy the css)
  • simpler
  • more realistic: corrected the synchronisation issue bteween the chain and the cogs and added a missing cog on the right because your chain seemed to be floating in the air :

DEMO

The approach is the same, animating the rotation angle for the cogs and dash-offset for the chain path. I tweaked the timing between both animations to make it look as if the cogs are pulling the chain.

Browser support :

As IE doesn't support the svg animate element I also made this version of the animation with the snap.svg library that also supports IE9 and over (tested in IE9 with crossbrowsertesting).

DEMO with IE support

var cont   = new Snap('#svg'),    chain  = cont.select('#chain'),    cogAcw = cont.select('#cog_acw'),    cogCw  = cont.select('#cog_cw'),    speed  = 500;  // Lower this number to make the animation faster
function infChain(el) { var len = el.getTotalLength(); el.attr({"stroke-dasharray": len/62,"stroke-dashoffset": 0}); el.animate({"stroke-dashoffset": -len/31}, speed, mina.linear, infChain.bind(null, el));}function rotateAcw(el) { el.transform('r22.5,20,20'); el.animate({ transform: 'r-22.5,20,20' }, speed, mina.linear, rotateAcw.bind( null, el));}function rotateCw(el) { el.transform('r0,20,20'); el.animate({ transform: 'r45,20,20' }, speed, mina.linear, rotateCw.bind( null, el));}infChain(chain);rotateAcw(cogAcw);rotateCw(cogCw);
svg {    width:100%;}
<script src="http://thisisa.simple-url.com/js/snapsvg.js"></script><svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 30">    <defs>        <circle id="c" cx="20" cy="20" r="4" stroke="#808080" fill="none" stroke-width="4" />        <path id="d" stroke="#808080" stroke-width="2" d="M20 13 V16 M27 20 H24 M20 27 V24 M13 20 H16" />        <g id="cog_acw">            <use xlink:href="#c" /><use xlink:href="#d" />            <use xlink:href="#d" transform="rotate(45 20 20)" />        </g>          <g id="cog_cw">            <use xlink:href="#c" /><use xlink:href="#d" />            <use xlink:href="#d" transform="rotate(45 20 20)" />        </g>      </defs>    <path id="chain" stroke-width="1" stroke="#000" fill="transparent"     d="M21.3 13.5 H20 C11.4 13.5 11.4 26.5 20 26.5 H80 C89.4 26.5 89.4 13.5 80.8 13.5z" />    <use  xlink:href="#cog_acw" />    <use  transform="translate(60.5 0), rotate(19,20,20)" xlink:href="#cog_acw" />    <use  transform="translate(-4.5 -4.5),scale(.8), rotate(0,20,20)" xlink:href="#cog_cw" />    </svg>

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.



Related Topics



Leave a reply



Submit