CSS Properties: How to border-spaciing is animatable?

Last update on February 19 2024 13:01:57 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type as HTML -->
<html><!-- Root element of the HTML document -->
<head><!-- Contains metadata about the HTML document -->
<title>How to border-spacing is animatable</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
table,th,td { /* Defines a CSS rule for tables, table headers, and table cells */
border: 1px solid black; /* Sets the border of tables, table headers, and table cells to 1 pixel solid black */
}
#xyzTABLE { /* Defines a CSS rule for a table with the ID 'xyzTABLE' */
border-spacing: 2px; /* Sets the spacing between the borders of adjacent table cells to 2 pixels */
border-color: #22CF64; /* Sets the color of the table border to #22CF64 */
-webkit-animation: mymove 5s infinite; /* Applies a CSS animation named 'mymove' with a duration of 5 seconds and an infinite repeat count, specifically for WebKit browsers */
animation: mymove 5s infinite; /* Applies a CSS animation named 'mymove' with a duration of 5 seconds and an infinite repeat count */
}
@keyframes mymove { /* Defines a CSS animation named 'mymove' */
50% {border-spacing: 20px;} /* Specifies the CSS property 'border-spacing' to change to 20 pixels at 50% of the animation duration */
}
</style><!-- Ends the CSS style block -->
</head><!-- Ends the head section of the HTML document -->
<body><!-- Contains the content of the HTML document -->
<p>w3resource Tutorial</p><!-- Displays the text 'w3resource Tutorial' within a paragraph element -->
<table id="xyzTABLE"><!-- Creates a table with the ID 'xyzTABLE' -->
<tr><!-- Begins a table row -->
<td>HTML5</td><!-- Defines a table data cell with the text 'HTML5' -->
<td>JavaScript</td><!-- Defines a table data cell with the text 'JavaScript' -->
</tr><!-- Ends the table row -->
<tr><!-- Begins another table row -->
<td>PHP</td><!-- Defines a table data cell with the text 'PHP' -->
<td>CSS3</td><!-- Defines a table data cell with the text 'CSS3' -->
</tr><!-- Ends the table row -->
</table><!-- Ends the table -->
<br><!-- Inserts a line break -->
</body><!-- Ends the body section of the HTML document -->
</html><!-- Ends the HTML document -->

Explanation:

The HTML document structure includes essential elements such as html, head, title, style, and body.
CSS styling is applied to tables, table headers, and table cells, setting their border to 1 pixel solid black.
A specific CSS rule is defined for a table with the ID xyzTABLE, setting its border-spacing to 2 pixels and border color to #22CF64.
An animation named mymove is defined using @keyframes, specifying that at 50% of the animation duration, the border-spacing property should change to 20 pixels, creating an animated effect.
The table with the ID xyzTABLE is created with rows and cells containing text.
A line break <br> is inserted after the table.

Live Demo:

See the Pen border-spacing-animatable-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page