css过渡悬停字体真棒

正在尝试在悬停上添加左V形，但过渡不起作用

div.bx-wrapper:hover div.bx-controls-direction:：before{
内容：“\f053”；
字体系列：Fontsome；
字体风格：普通；
字体大小：正常；
文字装饰：继承；
颜色：#000；
字号：18px；
右侧填充：0.5em；
位置：绝对位置；
顶部：30px；
左：0；
不透明度：1；
}
div.bx-wrapper div.bx-controls-direction:：before{
不透明度：0；
转换：不透明度2，易于输入输出；
-moz转换：不透明度2缓进缓出；
-webkit转换：轻松输入输出；
}

您应该在选择器的默认状态下设置所有CSS（包括转换），然后只设置

不透明度：1处于悬停状态：


div.bx-wrapper div.bx-controls-direction:：before{
内容：“\f053”；
字体系列：Fontsome；
字体风格：普通；
字体大小：正常；
文字装饰：继承；
颜色：#000；
字号：18px；
右侧填充：0.5em；
位置：绝对位置；
顶部：30px；
左：0；
不透明度：0；
转换：不透明度2，易于输入输出；
-moz转换：不透明度2缓进缓出；
-webkit转换：轻松输入输出；
}
div.bx-wrapper:hover div.bx-controls-direction:：before{
不透明度：1；
}

盘旋我
真棒
请在您的代码片段中添加一个指向awesome字体的链接，以便我们测试您的代码为什么不使用脚本在悬停时添加动画类？@SumitSahay如果可以使用纯CSS完成，为什么要使用脚本？