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
Jquery Submit Form and Then Show Results in an Existing Div
How to Determine Which Submit Button Was Pressed, Form Onsubmit Event, Without Jquery
Force Browser to Trigger Reflow While Changing CSS
How to Use JavaScript to Change the Form Action
How to Sort Elements by Numerical Value of Data Attribute
Bootstrap 4 Navbar Not Collapsing on Large Screen
How to Compare Colors in JavaScript
Google Maps: How to Create a Custom Infowindow
Html5 Canvas Ctx.Filltext Won't Do Line Breaks
How to Access the Contents of an Svg File in an <Img> Element
How to Get the HTML for a Dom Element in JavaScript
How to Maintain a Websockets Connection Between Pages
How to Export HTML Table to Excel Using JavaScript
How to Curve/Arc Text Using CSS3/Canvas
Change Values in Array When Doing Foreach
Flow 2 Columns of Text Automatically with CSS
Foreach on Queryselectorall Not Working in Recent Microsoft Browsers