Scribd
Upload
12 views3 pages

CSS Transition Properties

The document is an HTML example demonstrating CSS transition properties. It includes a grid layout with squares that change in size and color on hover or focus, showcasing different transition effects. The CSS specifies various transition properties for different classes of squares to create smooth animations.

Uploaded by

nnacy859
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views3 pages

CSS Transition Properties

The document is an HTML example demonstrating CSS transition properties. It includes a grid layout with squares that change in size and color on hover or focus, showcasing different transition effects. The CSS specifies various transition properties for different classes of squares to create smooth animations.

Uploaded by

nnacy859
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS transition properties

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>Transition-property example</title>

<style>

body {

display: grid;

place-items: center;

color: #fff;

font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue", Helvetica,


Arial, "Lucida Grande", Sans-Serif;

.wrapper {

display: grid;

grid-template-columns: 1fr 2fr;

grid-gap: 35px;

.square {

background: #1739dc;

border-radius: 6px;

width: 100px;

height: 100px;

line-height: 95px;

text-align: center;
transition-duration: 1s;

transition-timing-function: ease;

padding: 5px;

margin: inherit;

.square.none {

transition-property: none;

border-radius: 25%; /*creates rounded corners*/

.square.transform {

transition-property: transform;

border-radius: 25%;

.square.color {

transition-property: background-color;

border-radius: 25%;

.square.both { /*When the background-color or transform changes, apply a


smooth animation to those changes.*/

transition-property: background-color, transform;

border-radius: 25%;

.square:is(:hover, :focus) { /*:hover – the user hovers the mouse over it*/
transform: scale(1.5); /*:focus – the element is focused (e.g., via
keyboard or click for some elements).*/

background-color: #d453b8;

</style>

</head>

<body>

<div class="wrapper">

<div class="square none">none</div>

<div class="square transform">transform</div>

<div class="square color">color</div>

<div class="square both">both</div>

</div>

</body>

</html>

You might also like