css动画

-webkit-transition: 属性(多个的话用,隔开) 时间 ease-in-out;
-moz-transition: 属性 时间 ease-in-out;
transition: 属性 时间 ease-in-out;

然后配合伪类一起来用

.move1 {
    color: #fff;
    display: block;
    width: 30px;
    height: 20px;
    margin: 10px auto;
    border-top: 2px solid #666;

    -webkit-transition: width 0.4s ease-in-out;
    -moz-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.move1:hover {
    width: 400px;
}

当选到move1类名的标签 时,就会有动画效果啦

你可能感兴趣的:(css动画)