“Javascript转换”；“跳跃”；而不是过渡

我正在尝试使用javascript、css和html在页面上转换一些图像。我已经设置了javascript来添加css类名以完成转换。但是，当我加载页面时，图像会跳跃，而不是转换。任何帮助都将不胜感激，因为我被困住了。这是我的密码：

window.onload；
var movepic1=document.getElementById（“pic1”）；
console.log（movepic1）；
函数classChange（）{
movepic1.className=“trans”；
}
console.log（movepic1）；
setTimeout（classChange，3000）
。折叠图片{
利润率：0 180像素；
垫面：10%；
显示：内联块；
宽度：40%；
职位：
}
.fold_pics img{
显示：内联块；
}
#图1{
位置：相对位置；
右：100%；
宽度：30px；
浮动：左；
不透明度：.3；
/*转换码*/
-webkit过渡：正确的3.0易用性；
-moz过渡：右3.0秒轻松；
过渡：正确的3.0s轻松；
-webkit过渡：不透明度3.0易用；
-moz过渡：不透明度3.0s；
过渡：不透明度3.0s；
}
#pic1.trans{
位置：相对位置；
右：50%；
宽度：33%；
浮动：左；
不透明度：1.0；
/*转换码*/
-webkit转换：正确的3.0；
-moz转换：右3.0秒；
过渡：正确的3.0
-webkit转换：不透明度3.0s；
-moz过渡：不透明度3.0s；
过渡：不透明度3.0s；
}
#图2{
位置：相对位置；
右：64%；
宽度：33%；
不透明度：.89；
}
#图3{
位置：相对位置；
左：20%；
宽度：33%；
浮动：左；
}
您基本上已经用不透明度转换覆盖了位置转换。
你需要用逗号分隔它们，而不是像这样有多个转换属性

transition: right 3.0s, opacity 3.0s;

此外，您不需要将transition属性同时放在
#pic1
和
#pic1.trans
中-它只需要放在
#pic1.trans
中，就可以用
不透明度覆盖
右侧的
转换

以下是使用多个属性的方式：

transition: right 3.0s ease, opacity 3.0s ease;

如果需要，也可以使用
all
：

transition: all 3.0s ease;

运行示例：


window.onload；
var movepic1=document.getElementById（“pic1”）；
console.log（movepic1）；
函数classChange（）{
movepic1.className=“trans”；
}
console.log（movepic1）；
setTimeout（classChange，3000）
。折叠图片{
利润率：0 180像素；
垫面：10%；
显示：内联块；
宽度：40%；
职位：
}
.fold_pics img{
显示：内联块；
}
#图1{
位置：相对位置；
右：100%；
宽度：30px；
浮动：左；
不透明度：.3；
/*转换码*/
过渡：右3.0缓，不透明度3.0缓；
}
#pic1.trans{
位置：相对位置；
右：50%；
宽度：33%；
浮动：左；
不透明度：1.0；
}
#图2{
位置：相对位置；
右：64%；
宽度：33%；
不透明度：.89；
}
#图3{
位置：相对位置；
左：20%；
宽度：33%；
浮动：左；
}

发现了我的问题。Chrome开发者工具没有在我写代码时更新我的代码。通过使用Ctrl+F5，代码得到更新，工作正常。谢谢大家给我的建议。您的输入增加了我的代码的组织。
仅供参考，您不应该将所有属性从
#pic1
复制到
#pic1.trans
。。。只有那些你想改变的。此外，您应该只将转换规则放在影响元素转换之前的块中。