CSS @Property

css-property.markdown

CSS @property

A Pen by Smashing Magazine on CodePen.

License.

index.html

<section>
	<div></div>
</section>
<p>Fig. Hover over the square</p>

style.css

@property --circleSize {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 10%;
}
section{
	width: 300px;
	height: 300px;
	background: beige;
	box-shadow: 0 0 10px rgb(248,247,244);
}
div {
	height: inherit;
	background: rgb(210,48,49);
	clip-path: circle(var(--circleSize) at center bottom);
	transition: --circleSize 300ms linear;
}
section:hover div { --circleSize: 125%; }

p { text-align: center; }

body {
	font-family: 'Montserrat';
	display: grid;
	color: rgb(43,43,43);
	place-content:  center;
	height: 100vh;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}