<html>
<head>
<title>Abakada CSS Demo: transition-delay Property</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<style type="text/css">
<!--
.box {
margin: 10; padding: 10;
transition-property: transform, border-radius, filter;
transition-timing-function: ease-in-out;
transition-duration: 3s;
}
.changed {
transform: rotate( 360deg );
border-radius: 12%;
filter: drop-shadow( -8px 8px 4px gray );
transition-property: transform, border-radius, filter;
transition-timing-function: ease-in-out;
transition-duration: 3s;
}
.delay-1 { transition-delay: 0.5s }
.delay-2 { transition-delay: 2s }
.delay-3 { transition-delay: 3.5s }
.label { border: 1px inset; border-radius: 10px;
background-color: beige }
-->
</style>
</head>
<body>
<div class="header"><h2>Abakada CSS Demo: <b>transition-delay</b> Property</h2></div>
<hr size=1 width=92%>
<center>
<h4>This example shows the effects of applying different <b>transition-delay</b> values.</h4>
<table>
<tr align="center">
<td><img class="box delay-1" src="/abkd/shared/images/samp03.jpg"></td>
<td><img class="box delay-2" src="/abkd/shared/images/samp05.jpg"></td>
<td><img class="box delay-3"src="/abkd/shared/images/samp14.jpg"></td>
</tr>
<tr align="center">
<td class="label">0.5s</td>
<td class="label">2s</td>
<td class="label">3.5s</td>
</tr>
</table>
<p><button id="apply">Apply</button>
</center>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
<script language="javascript">
function apply ( ) {
const elements = document.querySelectorAll ( "img.box" );
for ( const element of elements ) {
element.classList.toggle ( "changed" );
}
}
const changeButton = document.querySelector ( "#apply" );
changeButton.addEventListener ( "click", apply );
</script>
</html>