RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/css-properties/border-color-animatable-answer.php below:

Website Navigation

CSS Properties: How to set animatable border?

CSS Properties: How to set animatable border?Last update on February 17 2024 12:46:19 (UTC/GMT +8 hours)

Go to Exercise page

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to set animatable border</title><!-- Title of the HTML document -->
<style>/* CSS style start*/
#div {
    width: 200px; /* Sets the width of the div element */
    height: 100px; /* Sets the height of the div element */
    border: 15px solid coral; /* Sets the border style, width, and color for the div element */
    -webkit-animation: mymove 5s infinite; /* Sets a webkit animation for the div element */
    animation: mymove 5s infinite; /* Sets a standard animation for the div element */
}
@keyframes mymove { /* Defines a keyframe animation named "mymove" */
    50% {border-color: blue;} /* Specifies that at 50% of the animation duration, the border color changes to blue */
}
</style>
</head>
<body>
<div>w3resource HTML5 Tutorial - HTML5 is the fifth revision of HTML, a markup language to present and structure web document.</div><!-- Content inside a div element -->
</body>
</html>

Explanation:

This HTML document demonstrates how to set an animatable border using CSS animations.
The CSS style block defines a #div selector that applies styles to a <div> element.
width: 200px; sets the width of the <div> element to 200 pixels.
height: 100px; sets the height of the <div> element to 100 pixels.
border: 15px solid coral; sets the border style to solid, width to 15 pixels, and color to coral for the <div> element.
-webkit-animation: mymove 5s infinite; and animation: mymove 5s infinite; apply animations to the <div> element. The animation mymove lasts for 5 seconds and repeats infinitely.
@keyframes mymove { ... } defines a keyframe animation named mymove.
50% {border-color: blue;} specifies that at 50% of the animation duration, the border color changes to blue.

Live Demo:

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

See the solution in the browser

Supported browser

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4