CSS Properties: How to defines the shape of the bottom-right corner is animatable?

Last update on February 17 2024 12:47:00 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to defines the shape of the bottom-right corner is animatable</title><!-- Title of the HTML document -->
<style>/* CSS style start*/
#xyz {
margin-left: 10px; /* Sets the left margin of the div to 10px */
margin-top: 3px; /* Sets the top margin of the div to 3px */
margin-right: 15px; /* Sets the right margin of the div to 15px */
background-color: #CCFF63; /* Sets the background color of the div to #CCFF63 */
border: 1px solid #c3c3c3; /* Applies a solid border with a width of 1px and color #c3c3c3 to the div */
height: 200px; /* Sets the height of the div to 200px */
-webkit-animation: mymove 5s infinite; /* Applies the webkit animation named "mymove" with a duration of 5s and infinite iteration */
animation: mymove 5s infinite; /* Applies the animation named "mymove" with a duration of 5s and infinite iteration */
}
@keyframes mymove { /* Keyframes rule defining the animation named "mymove" */
50% {border-bottom-right-radius: 50px;} /* Specifies the property to change at the 50% mark of the animation */
}
</style>
</head>
<body>
<div id="xyz">CSS, stands for Cascading Style Sheet is a computer language to describe presentation.<div><!-- Div element with text content -->
</body>
</html>

Explanation:

This HTML document demonstrates how to define the shape of the bottom-right corner of a div with the id "xyz" using an animatable property.
The CSS style block applies styling to the div element with the id "xyz".
margin-left: 10px;, margin-top: 3px;, and margin-right: 15px; set the left, top, and right margins of the div, respectively.
background-color: #CCFF63; sets the background color of the div to #CCFF63.
border: 1px solid #c3c3c3; applies a solid border with a width of 1px and color #c3c3c3 to the div.
height: 200px; sets the height of the div to 200px.
-webkit-animation: mymove 5s infinite; and animation: mymove 5s infinite; apply an animation named "mymove" with a duration of 5s and infinite iteration to the div.
@keyframes mymove defines the keyframes rule for the animation "mymove".
50% {border-bottom-right-radius: 50px;} specifies that at the 50% mark of the animation, the border radius of the bottom-right corner of the div should be changed to 50px.

Live Demo:

See the Pen border-bottom-right-radius-animatable-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page