-
26-12-2019 - |
题
我正在尝试在悬停状态下进行多次转换。
我希望图像首先旋转到左边的,然后返回开始,然后到右边的20deg 。
我已经尝试过:
-webkit-transform: rotate(20deg, -20deg);
.
和
-webkit-transform: rotate(20deg);
-webkit-transform: rotate(-20deg);
.
我会最好使用之前/之后吗?
提前感谢
解决方案
css3 关键帧动画会更适合制作这种效果,它们允许您定义多个状态并在这些状态之间设置动画。
以下演示将图像旋转20度,然后返回正常状态,暂停并旋转20度。动画是在悬停上启动的。
.whatWeDo img {
margin:9% 0;
height: 102px;
width: 100px;
}
.whatWeDo img:hover {
-webkit-animation: rotation 4s;
animation: rotation 4s;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
@-webkit-keyframes rotation {
0% { -webkit-transform: rotate(0deg);}
25% { -webkit-transform: rotate(-20deg);}
50% { -webkit-transform: rotate(0deg);}
75% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(20deg);}
}
@-keyframes rotation {
0% { transform: rotate(0deg);}
25% { transform: rotate(-20deg);}
50% { transform: rotate(0deg);}
75% { transform: rotate(0deg);}
100% { transform: rotate(20deg);}
}
. 不隶属于 StackOverflow