使用css3的动画属性来实现js的移动效果
先把类名和CSS属性写好。
使用transition全局属性来实现动画从左到右的移动宽度的时间。
使用transition-property属性来指定类名的宽度移动效果的时间。
使用transition-delay来实现它的延迟时间。
使用transition-timing-function来选择它的运动曲线。
当然还有最简单的综合写法
使用transition全局属性来实现以上的写法
.seser{ ???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;}下面这个是图片的移动效果。
使用全局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;}css3动画效果
原文地址：https://www.cnblogs.com/luohaiwenhtml/p/8423480.html