# image {
position: relative//图片的相对位置
animation: falling 1s linear//动画名称为falling，持续时间1s，动画速度变化线性
}
@keyframes falling {
0% { top: 0px} //初始时图片位于顶部
100% { top: 300px} //最终时图片位于300px处
}
假设每个标签的单位是li标签，li要设置overflow:hidden，并且li要有一个的高度。li下边要添加一个div，给他个class叫child。给他个属性transtion: transform 2s(多少s是希望多少秒完成动画)
child里面再画两个div，这两个div高度等于li的高度。这时候你只能看到一个div，因为下边的超出隐藏了。
li:hover child {
trasfrom: tranlateY(这里写一个li的高度，看情况是正直值还是负值。应该是正数)
}
<div class="radius"></div>.radius {
width: 100px
height: 100px
border-radius:50%
background: red
-webkit-animation: float ease-in-out 2s infinite
animation: float ease-in-out 2s infinite
}
@-webkit-keyframes float {
0% {
-webkit-transform: translateY(0)
transform: translateY(0)
}
50% {
-webkit-transform: translateY(20px)
transform: translateY(20px)
}
100% {
-webkit-transform: translateY(0)
transform: translateY(0)
}
}
@keyframes float {
0% {
-webkit-transform: translateY(0)
transform: translateY(0)
}
50% {
-webkit-transform: translateY(20px)
transform: translateY(20px)
}
100% {
-webkit-transform: translateY(0)
transform: translateY(0)
}
}
想多大只要改变20px
如果左右把y轴改为x轴
