css3动画效果

使用css3的动画属性来实现js的移动效果

先把类名和CSS属性写好。

使用transition全局属性来实现动画从左到右的移动宽度的时间。

使用transition-property属性来指定类名的宽度移动效果的时间。

使用transition-delay来实现它的延迟时间。

使用transition-timing-function来选择它的运动曲线。

当然还有最简单的综合写法

使用transition全局属性来实现以上的写法

.rotate{
    width:200px;
    height:200px;
    background:#F00;
    /*动画从左向右运动元素的宽度为三秒*/
    transition:width 3s;
    /*指定要监控的属性是元素的宽度*/
    transition-property:width 2s;
    /*延迟时间为0.1秒*/
    transition-delay:0.1s;
    /*运动的曲线为：匀速*/
    transition-timing-function:linear;
    /*综合写法*/
    transition:all 3s 0.1 linear;
}
.rotate:hover{
    width:600px;
}

 

 

 

 下面这个是图片的移动效果。

使用全局transition全局属性来实现的

.serad{
    margin-left:400px;
    margin-top:100px;
    width:500px;
    height:400px;
    position:absolute;
}
.serad img{
    width:300px;
    height:300px;
    border:2px solid #F00;
    position:absolute;
    left:0;
    top:0;
    transition:left 2s;
}
.serad img:hover{
    left:-20px;
}