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

Last update on February 16 2024 13:18:27 (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-left corner is animatable</title><!-- Title of the HTML document -->
<style>/* CSS style start*/
#xyx {
    margin-left: 10px; /* Setting left margin of the div to 10px */
	margin-top: 3px; /* Setting top margin of the div to 3px */
	margin-right: 15px; /* Setting right margin of the div to 15px */
	background-color: #CCFF63; /* Setting the background color of the div to #CCFF63 */
	border: 1px solid #c3c3c3; /* Setting a solid border with a width of 1 pixel and color #c3c3c3 for all sides of the div */
	height: 200px; /* Setting the height of the div to 200 pixels */
	-webkit-animation: mymove 5s infinite; /* Applying animation to the div for webkit browsers */
    animation: mymove 5s infinite; /* Applying animation to the div */
	}
  @keyframes mymove { /* Defining keyframes for the animation */
    50% {border-bottom-left-radius: 50px;} /* At 50% of the animation duration, changing the border-bottom-left-radius property to 50px */
}
</style>
</head>
<body>
<div id="xyx">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-left corner of a div with an animatable property.
The CSS style block applies styling to the div element with the id xyx.
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; sets a solid border with a width of 1 pixel and color #c3c3c3 for all sides of the div.
height: 200px; sets the height of the div to 200 pixels.
-webkit-animation: mymove 5s infinite; and animation: mymove 5s infinite; apply an animation called mymove to the div, making it last for 5 seconds and repeat infinitely.
@keyframes mymove { ... } defines the keyframes for the animation, specifying the changes in the border-bottom-left-radius property at different points in the animation. In this case, it changes to 50px at 50% of the animation duration.

Live Demo :

See the Pen bdi-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page