w3resource logo


HTML exercises

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


Go to Exercise page

Solution:

HTML Code :

<!DOCTYPE html>
<html>
<head>
<title>How to defines the shape of the bottom-left corner is animatable</title>
<style>
#xyx {
    margin-left: 10px;
	margin-top: 3px;
	margin-right: 15px;
	background-color: #CCFF63;
	border: 1px solid #c3c3c3;
	height: 200px;
	-webkit-animation: mymove 5s infinite;
    animation: mymove 5s infinite;
	}
  @keyframes mymove {
    50% {border-bottom-left-radius: 50px;}
}
</style>
</head>
<body>

<div id="xyx">CSS, stands for Cascading Style Sheet is a computer language to describe presentation.<div>


</body>
</html>

Live Demo :

How to defines the shape of the bottom-left corner is animatable on jsbin.com

See the solution in the browser

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes No

 

Go to Exercise page



Join our Question Answer community to learn and share your programming knowledge.