<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
.box,.box3{
width: 900px;
height: 600px;
background: black;
position: relative;
float: left;
margin: 0px 20px;
overflow: hidden;
animation: box 2s linear alternate infinite;
}
.box1,.box2{
width: 300px;
height: 100px;
background: red;
position: absolute;
margin-top: -50px;
top: 50%;
opacity: 0;
animation: box1 2s linear alternate infinite;
}
.box2{
right: 0;
}
.box:hover div{
transform: scale(0.1);
opacity: 2;
border-radius: 100px;
}
@-webkit-keyframes box1{
from{
transform: scale(0.1);
}
30%{
transform: translateY(50px 50px);
border-radius: 100%;
/*transform: scale(0.8);*/
}
to{
transform: scale(1);
}
}
@-webkit-keyframes box{
from{
transform: translatey(20px);
}
to{
transform: translatey(200px);
}
}
.box4{
height: 200px;
background: blueviolet;
opacity: 0;
animation: box5 2s linear alternate infinite;
}
.box3:hover div{
opacity: 2;
}
@-webkit-keyframes box5{
from{
transform: translateY(-222px);
}
to{
transform: translateY(0px);
}
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>