transition

简单transition动画

html代码：

1 <div class="img1">效果1，360度旋转</div>
2 <div class="img2">效果2，放大</div>
3 <div class="img3">效果3，旋转放大</div>
4 <div class="img4">效果4，上下左右移动</div>

css代码：

div{
    width: 120px;
    height: 120px;
    line-height: 120px;
    margin:20px;
    background-color: #5cb85c;
    float: left;
    font-size: 12px;
    text-align: center;
    color: orangered;
}
.img1,.img2,.img3,.img4{
    transition: all 0.4s ease-in-out;
}
.img1:hover{
    transform: rotate(360deg);
}
.img2:hover{
    transform: scale(1.2);
}
.img3:hover{
    transform: rotate(360deg) scale(1.2);
}
.img4:hover{
    transform: translate(0,-10px);
}