How To Move A Div In CSS3
In This CSS Tutorial we will see How To Make A Moving Div Animation Using Keyframes In CSS3 In Netbeans Editor .
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS3 - Moving Div</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container{background-color: #ddd;padding: 25px;}
.content{width: 100px;height: 100px;background-color: red;
animation: move 5s linear infinite; }
@keyframes move{
0%{
transform:translate(0);
opacity:0;
}
50%{
transform:translate(1100px);
opacity:1;
}
100%{
opacity:0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="content"></div>
</div>
</body>