Animate a dotted border with CSS

Question

Animate a dotted border with CSS

How can I make a text block with a dotted style border move like a gif image using CSS at runtime?

Answer 1

Answer №1

If you're looking for a non-CSS3 solution, check out this link:

For a CSS3 option without using images, you can try creating stripes with CSS3 gradients and animating background-position. Here's a rough demo to give you an idea: http://codepen.io/christopheschwyzer/pen/CEwBI. However, keep in mind that this may only work well on Webkit browsers.

Answer 2

If you're looking for a non-CSS3 solution, check out this link:

For a CSS3 option without using images, you can try creating stripes with CSS3 gradients and animating background-position. Here's a rough demo to give you an idea: http://codepen.io/christopheschwyzer/pen/CEwBI. However, keep in mind that this may only work well on Webkit browsers.

Answer 3

Answer №2

Check out this detailed example that I created following the steps outlined in this blog post. Have fun experimenting!

.outer {
  position: absolute;
  
  left: 100px;
  top: 50px;
  width: 100px;
  height: 100px;
  
  background-image: url(http://matthewjamestaylor.com/blog/selection.gif);
  
  border: 1px solid;
}

.selected {
  border: 0px;
}

.inner {
  position:absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;

  background-color: #9CF;
}

.selected .inner {
  margin: 1px;
}

<div class="outer selected">
  <div class="inner" />
</div>

Answer 4

Check out this detailed example that I created following the steps outlined in this blog post. Have fun experimenting!

.outer {
  position: absolute;
  
  left: 100px;
  top: 50px;
  width: 100px;
  height: 100px;
  
  background-image: url(http://matthewjamestaylor.com/blog/selection.gif);
  
  border: 1px solid;
}

.selected {
  border: 0px;
}

.inner {
  position:absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;

  background-color: #9CF;
}

.selected .inner {
  margin: 1px;
}

<div class="outer selected">
  <div class="inner" />
</div>

Answer 5

Answer №3

The appearance of your animation will depend on your specific requirements.

Generally, the styles provided by border-style are displayed in a static manner and cannot be animated.

Even with CSS3, there are limited options for animating with border-image. You can try using a carefully crafted animated GIF or a gradient animation, depending on browser compatibility and your desired visual effect.

Alternatively, you can experiment with ::before and ::after pseudo-elements to achieve the desired outcome.

It is important to consider accessibility guidelines such as WCAG 2.2.2 and 2.3 when incorporating animations into your design. Poorly executed animations can be distracting and potentially harmful to certain users.

In essence, use animated effects judiciously and ensure they enhance the user experience rather than detract from it.

Answer 6

The appearance of your animation will depend on your specific requirements.

Generally, the styles provided by border-style are displayed in a static manner and cannot be animated.

Even with CSS3, there are limited options for animating with border-image. You can try using a carefully crafted animated GIF or a gradient animation, depending on browser compatibility and your desired visual effect.

Alternatively, you can experiment with ::before and ::after pseudo-elements to achieve the desired outcome.

It is important to consider accessibility guidelines such as WCAG 2.2.2 and 2.3 when incorporating animations into your design. Poorly executed animations can be distracting and potentially harmful to certain users.

In essence, use animated effects judiciously and ensure they enhance the user experience rather than detract from it.

Answer 7

Answer №4

Here is a versatile SCSS solution that provides flexibility:

$antlength: 50px;
$antwidth: 10px;
$antcolor: black;

@keyframes marching-ants {
    0%   {background-position: 0 0, $antlength 100%, 0 $antlength, 100% 0;}
    100% {background-position: $antlength 0, 0 100%, 0 0, 100% $antlength;}
}

.ants {
    background-image: linear-gradient(90deg, $antcolor 50%, transparent 50%),
        linear-gradient(90deg, $antcolor 50%, transparent 50%),
        linear-gradient(0, $antcolor 50%, transparent 50%),
        linear-gradient(0, $antcolor 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: $antlength $antwidth, $antlength $antwidth, $antwidth $antlength, $antwidth $antlength;
    animation: marching-ants 400ms infinite linear;
}

Condensed to a snippet:

@keyframes marching-ants {
  0% {
    background-position: 0 0, 50px 100%, 0 50px, 100% 0;
  }
  100% {
    background-position: 50px 0, 0 100%, 0 0, 100% 50px;
  }
}

.ants {
  background-image: linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(0, black 50%, transparent 50%), linear-gradient(0, black 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 50px 10px, 50px 10px, 10px 50px, 10px 50px;
  animation: marching-ants 400ms infinite linear;
}

<div class="ants">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 8

Here is a versatile SCSS solution that provides flexibility:

$antlength: 50px;
$antwidth: 10px;
$antcolor: black;

@keyframes marching-ants {
    0%   {background-position: 0 0, $antlength 100%, 0 $antlength, 100% 0;}
    100% {background-position: $antlength 0, 0 100%, 0 0, 100% $antlength;}
}

.ants {
    background-image: linear-gradient(90deg, $antcolor 50%, transparent 50%),
        linear-gradient(90deg, $antcolor 50%, transparent 50%),
        linear-gradient(0, $antcolor 50%, transparent 50%),
        linear-gradient(0, $antcolor 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: $antlength $antwidth, $antlength $antwidth, $antwidth $antlength, $antwidth $antlength;
    animation: marching-ants 400ms infinite linear;
}

Condensed to a snippet:

@keyframes marching-ants {
  0% {
    background-position: 0 0, 50px 100%, 0 50px, 100% 0;
  }
  100% {
    background-position: 50px 0, 0 100%, 0 0, 100% 50px;
  }
}

.ants {
  background-image: linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(0, black 50%, transparent 50%), linear-gradient(0, black 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 50px 10px, 50px 10px, 10px 50px, 10px 50px;
  animation: marching-ants 400ms infinite linear;
}

<div class="ants">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 9

Answer №5

I am currently searching for a solution that can help me create an animated border similar to the one used in Excel to indicate a cut selection waiting to be pasted.

Some might consider it tacky, but in the context of my project, I think it would be quite effective.

After some research, I came across this jQuery plugin: . The original poster may find it useful for their needs.

Answer 10

I am currently searching for a solution that can help me create an animated border similar to the one used in Excel to indicate a cut selection waiting to be pasted.

Some might consider it tacky, but in the context of my project, I think it would be quite effective.

After some research, I came across this jQuery plugin: . The original poster may find it useful for their needs.

Answer 11

Answer №6

Below are two instances showcasing the utilization of border-image.

Benefits:

Requires only a single div element
Possibility for complete transparency within

.selected {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50px;

  border: 1px solid transparent;
  box-sizing: border-box;

  border-image-outset: 0px;
  border-image-repeat: repeat;
  border-image-source: url("http://matthewjamestaylor.com/blog/selection-big.gif");
}

.v1 {
  left: 100px;

  border-image-slice: 6;
  border-image-width: 1px;
}

.v2 {
  left: 300px;

  border-image-slice: 3;
  border-image-width: 2px;
}

<p style="color: #aaa;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquam metus hendrerit venenatis placerat. Morbi sem ex, egestas at egestas iaculis, imperdiet in mauris. Nulla facilisi. Aliquam eu porttitor libero, vel porta ipsum. Proin egestas consequat urna, et rhoncus arcu congue vitae. Maecenas at massa mollis, accumsan mauris in, faucibus ligula. Nulla sed lorem pharetra lacus dictum lobortis sit amet id tellus. Vestibulum porta auctor maximus. Fusce congue, orci et feugiat ultricies, turpis mi egestas est, nec vulputate nulla risus quis lorem. Sed vitae risus rhoncus, ultricies nunc non, mollis mauris.</p>

<div class="selected v1">
</div>

<div class="selected v2">
</div>

Answer 12

Below are two instances showcasing the utilization of border-image.

Benefits:

Requires only a single div element
Possibility for complete transparency within

.selected {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50px;

  border: 1px solid transparent;
  box-sizing: border-box;

  border-image-outset: 0px;
  border-image-repeat: repeat;
  border-image-source: url("http://matthewjamestaylor.com/blog/selection-big.gif");
}

.v1 {
  left: 100px;

  border-image-slice: 6;
  border-image-width: 1px;
}

.v2 {
  left: 300px;

  border-image-slice: 3;
  border-image-width: 2px;
}

<p style="color: #aaa;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquam metus hendrerit venenatis placerat. Morbi sem ex, egestas at egestas iaculis, imperdiet in mauris. Nulla facilisi. Aliquam eu porttitor libero, vel porta ipsum. Proin egestas consequat urna, et rhoncus arcu congue vitae. Maecenas at massa mollis, accumsan mauris in, faucibus ligula. Nulla sed lorem pharetra lacus dictum lobortis sit amet id tellus. Vestibulum porta auctor maximus. Fusce congue, orci et feugiat ultricies, turpis mi egestas est, nec vulputate nulla risus quis lorem. Sed vitae risus rhoncus, ultricies nunc non, mollis mauris.</p>

<div class="selected v1">
</div>

<div class="selected v2">
</div>

Answer 13

Answer №7

Are you interested in adding animation to the dotted border?

You may want to explore using CSS 3 border images, which enables you to use an animated gif for your border effect, although this method may not be compatible with Internet Explorer.

Answer 14

Are you interested in adding animation to the dotted border?

You may want to explore using CSS 3 border images, which enables you to use an animated gif for your border effect, although this method may not be compatible with Internet Explorer.

Answer 15

Answer №8

To incorporate a gif image as the background, CSS is the only method available. Otherwise, you would need to rely on JavaScript.

Answer 16

To incorporate a gif image as the background, CSS is the only method available. Otherwise, you would need to rely on JavaScript.

Animate a dotted border with CSS

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Dynamically altering the CSS4 variables in real time

Is the background color extending the entire width of the page?

Progress Bars Styled with CSS Percentages

Rotating the icon in Bootstrap Accordion upon opening

Creating tooltips using React and Tailwind CSS

Is there a way to assign "label 3" with the identical percentage as "label 1" on this particular form?

css issue with opacity transition not functioning properly

Content towering over the footer

Is it possible to resume CSS animation when the page is first loaded?

Issue with importing CSS in Pug-Template

Accelerate Image Preloading速

I have a simple inquiry regarding the customization of table designs

Tips for setting height within a flexbox layout?

How can you exhibit various images without relying on the <img> tag?

A method for utilizing wildcards in conjunction with the .load function

Utilize orientation detection technology to ascertain the exact placement of an image

Adjacent components

Material-UI LeftNav with a sticky header

Having difficulty navigating the website due to the inability to scroll

The difference between see-through shades and rgba(0,0,0,0)