Dashed border animation in css3 animation

by

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>

Here is a sample with continuous movement of the borders right from the page load.

.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: 15px 4px, 15px 4px, 4px 15px, 4px 15px;
  background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px;
  padding: 10px;
  animation: border-dance 4s infinite linear;
}
@keyframes border-dance {
  0% {
    background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px;
  }
  100% {
    background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="border">Some text</div>

Credits to web-tiki for helping to fix the slight distortion that was originally present at the end of each loop of the animation.

More Related Contents:

  1. JS hide function error
  2. How to change css of a div with a certain id when hovering over a certain element anywhere in the whole webpage?
  3. Get the longest text in HTML document using Jquery or javascript
  4. Pure JavaScript toggle for select / deselect all checkboxes [duplicate]
  5. Javascript counting all the characters from a HTML document
  6. JSFiddle code not working in my own page
  7. How to disable scroll without hiding it?
  8. Changing nav-bar color after scrolling?
  9. jQuery: Get selected element tag name
  10. How to dynamically create ‘@-Keyframe’ CSS animations?
  11. Infinity Loop Slider Concepts
  12. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  13. width/height after transform
  14. Save a pre element as PDF with CSS
  15. Creating a select box with a search option
  16. jQuery Validation using the class instead of the name value
  17. Center flex item in container, when surrounded by other flex items
  18. Fill available spaces between labels with dots or hyphens
  19. Change the style of :before and :after pseudo-elements? [duplicate]
  20. How to resize Twitter Bootstrap modal dynamically based on the content
  21. Uncaught TypeError: Cannot read property ‘top’ of undefined
  22. collapse and expand tabs jquery / simple accordion
  23. Remove scrollbar but not scrolling functionality [duplicate]
  24. Print repeating Page headers in Chrome [closed]
  25. Gaussian Blur onHover Using jQuery
  26. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  27. fade effect using javascript no jquery?
  28. Detect if dropdown navigation would go off screen and reposition it
  29. Iframe inherit from parent
  30. Bootstrap Dropdown menu is not working

Leave a Comment