<!doctype html>
<head>
<title>CSS3 Transitions - RJM Programming - October, 2017</title>
<style>
* {
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}
h1 {
background-color: font-family: Verdana;
-webkit-transition: font-family 2s; /* Safari */
transition: font-family 2s;
}
h1:hover {
font-family: Arial;
}
h2 {
background-color: red;
-webkit-transition: background-color 2s; /* Safari */
transition: background-color 2s;
}
h2:hover {
background-color: yellow;
}
h3 {
opacity: 0.6;
-webkit-transition: opacity 2s; /* Safari */
transition: opacity 2s;
}
h3:hover {
opacity: 1.0;
}
.cdiv {
width: 300px;
height: 200px;
background: red;
-webkit-transition-delay: 3s;
transition-delay: 3s;
-webkit-transition-property: height, width; /* Safari */
transition-property: height, width;
-webkit-transition-duration: 4s, 22s; /* Safari */
transition-duration: 4s, 22s;
}
.cdiv:hover {
width: 600px;
height: 400px;
}
p {
float: left;
-webkit-transition: float 2s; /* Safari */
transition: float 2s;
}
p:hover {
float: right;
}
td, th {
width: 100%;
height: 175px;
overflow: hidden;
}
.wrapper {
width: 100%;
height: 50vh;
overflow: hidden;
}
.spanner {
display: inline-block;
background:url(//www.rjmprogramming.com.au/logo_old_okay.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: #ffffff;
width:50%;
height:50%;
-webkit-transition: border 2s, background-color 2s, background-size 2s, transform 2s; /* Safari */
transition: border 2s, background-color 2s, background-size 2s, transform 2s;
}
.spanner:hover { transform:scale(1.1); background-size: cover; border: 0px solid red; background-color: orange; }
</style>
<script type='text/javascript'>
var isgame=false, score=0, goes=0;
var swhich=eval(1 + Math.floor(Math.random() * 4));
function setval() {
if ((location.search.split('game=')[1] ? decodeURIComponent(location.search.split('game=')[1]).split('&')[0] : '') != '') isgame=true;
document.getElementById('mysel').value=(location.search.split('type=')[1] ? decodeURIComponent(location.search.split('type=')[1]).split('&')[0] : 'ease');
if (isgame) {
if (parent.document.getElementById('mygame')) {
parent.document.getElementById('mygame').style.display='block';
document.getElementById('wrapper').style.display='block';
document.getElementById('s' + swhich).title='Ouch!';
} else {
document.getElementById('amygame').click();
//document.getElementById('mygame').src=document.URL;
//document.getElementById('wrapper').style.display='block';
}
//location.href='#wrapper';
setTimeout(onegoes, 1000);
}
}
function scoreit(sio) {
if (eval(sio.id.replace('s','')) == swhich) {
score-=5;
} else {
score++;
}
}
function onegoes() {
goes++;
document.getElementById('score').innerHTML=' Score: ' + score + '/' + goes;
setTimeout(onegoes, 1000);
}
</script>
</head>
<body onload="setval();">
<iframe name='mygame' id='mygame' style='display:none;width:100%;height:900px;'></iframe>
<div id=wrapper class=wrapper style='display:none;'><div onclick='' onmouseover='scoreit(this);' id=s1 class=spanner></div><div onclick='' onmouseover='scoreit(this);' id=s2 class=spanner></div><div onclick='' onmouseover='scoreit(this);' id=s3 class=spanner></div><div onclick='' onmouseover='scoreit(this);' id=s4 class=spanner></div></div>
<h1 onclick="">CSS3 <select id='mysel' onchange="location.href=document.URL.split('#')[0].split('?')[0] + '?type=' + this.value;"><option value='ease'>Ease</option><option value='linear'>Linear</option><option value='ease-in'>Ease-In</option><option value='ease-out'>Ease-Out</option><option value='ease-in-out'>Ease-In-Out</option><option value='cubic-bezier(0.25,0.1,0.25,1)'>Cubic-Bezier</option></select>Transitions <a target='mygame' id='amygame' href="./css3_transitions.htm?game=y" title="Try to avoid the angry spider">Game</a> <span id='score'></span></h1>
<h2 onclick="">RJM Programming - October, 2017</h2>
<h3 onclick="">Thanks to <a target=_blank title='CSS3 Transitions information from w3schools' href='https://www.w3schools.com/css/css3_transitions.asp'>https://www.w3schools.com/css/css3_transitions.asp</a></h3>
<div class="cdiv" onclick="">
Starts as width: 300px; height: 200px; ... After delay of 3 seconds<br>
Transitions to width: 600px; over 22 seconds, height: 400px; over 4 seconds
</div>
<p onclick="">
Starts as float: left; <br>
Transitions to float: right; over 2 seconds
</p>
<script type='text/javascript'>
document.write("<style> * { transition-timing-function: " + (location.search.split('type=')[1] ? decodeURIComponent(location.search.split('type=')[1]).split('&')[0] : 'ease') + "; -webkit-transition-timing-function: " + (location.search.split('type=')[1] ? decodeURIComponent(location.search.split('type=')[1]).split('&')[0] : 'ease') + "; } #s" + swhich + ":hover { transform:scale(1.1); background-size: contain; border: 3px solid red; } </style>");
</script>
</body>
</html>