HTML Elements

Page 13

CSS3 Animation

Mobile Drag & Drop Substitute

Not all mobile devices have implemented HTML5 drag and drop functionality yet. Animation might offer a good substitute. If you're trying to substitute animation for drag and drop, consider including a set of drop targets. Tap a drag target and tap one of the drop targets to move elements where the user selects.

You can also use a canvas to drag, drop and resize elements interactively. See Drag & Drop Tutorials on this site, for details.

Tap the Blue Box

In this example, the blue box moves and covers the violet box. Select Reset to start over. This example applies CSS3 animation. See the CSS rule-sets, JavaScript and HTML5 markup below.

Tap the Blue Square

CSS3 Animation: Markup

<div 
class="box" 
onclick="imgEventClick(event)"
>

<div 
id="dT" 
class="box-top"
>
</div>

<div 
id="dB" 
class="box-bottom"
>
</div>

</div>

<p 
id="eDragInfo" 
class="bld ctr"
>
</p>

<button 
id="btnR" 
class="btn" 
onclick="btnEventReset(event)"
>
Reset
</button>

CSS3 Animation: Styles

div.box{
width:128px;
height:384px;
margin:0px auto 0px auto;
text-align:center;
}
div.box-top{
position:relative;
top:0px;
width:128px;
height:128px;
background-color:blue;
z-index:1;
}
div.box-bottom{
position:relative;
top:128px;
width:128px;
height:128px;
background-color:violet;
z-index:0;
}
img.box{
position:relative;
top:-128px;
width:128px;
height:128px;
}

.tanim
{			
animation:tAnim 3s 1;
/* Safari and Chrome */
-webkit-animation:tAnim 3s 1;
animation-fill-mode: forwards; 
}

.banim
{			
animation:bAnim 3s 1;
/* Safari and Chrome */
-webkit-animation:bAnim 3s 1;
animation-fill-mode: forwards; 
}

@keyframes tAnim
{
0% {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
background-color:blue;
width:128px;
height:128px;
}
50% {
-webkit-transform: translateY(64px);
-moz-transform: translateY(64px);
-ms-transform: translateY(64px);
-o-transform: translateY(64px);
transform: translateY(64px);
background-color:blue;
width:128px;
height:128px;
}
90% {
-webkit-transform: translateY(128px);
-moz-transform: translateY(128px);
-ms-transform: translateY(128px);
-o-transform: translateY(128px);
transform: translateY(128px);
background-color:blue;
width:128px;
height:128px;
}
100% {
-webkit-transform: translateY(128px);
-moz-transform: translateY(128px);
-ms-transform: translateY(128px);
-o-transform: translateY(128px);
transform: translateY(128px);
background-color:rgba(0,0,0,0);
width:128px;
height:128px;
}			
}

@keyframes bAnim
{
0% {
background-color: violet;
position:relative;
top:128px;
width:128px;
height:128px;
}
90% {
background-color: violet;
position:relative;
top:128px;
width:128px;
height:128px;
}
100% {
background-color:blue;
position:relative;
top:128px;
width:128px;
height:128px;
}			
}

CSS3 Animation: JavaScript

var im = null;
var dT = null;
var dB = null;
timer = null;
function loadExample(){
im = document.getElementById('im');
dT = document.getElementById('dT');
dB = document.getElementById('dB');
}
//im.src ="../../assets/map-move-square.png"
function animForward(){	
dT.className = "tanim";
dT.style.animationPlayState = 'running';
dT.style.webkitAnimationPlayState = 'running';


dB.className = "banim";
dB.style.animationPlayState = 'running';
dB.style.webkitAnimationPlayState = 'running';
}

function imgEventClick(ev){
animForward();
}

function btnEventReset(ev){
dT.className="box-top";
dB.className="box-bottom";
}