箭头180°旋转
.img_normal{
animation-name: rotate_n; /* 动画名称 */
animation-duration: .3s; /* 动画时间 */
animation-timing-function: ease-in-out; /* 动画缓动 */
transform: rotate(0deg);
}
@keyframes rotate_n {
from {
transform: rotate(-180deg);
}
to {
transform: rotate(0deg);
}
}
.img_zhuan{
animation-name: rotate; /* 动画名称 */
animation-duration: .3s; /* 动画时间 */
animation-timing-function: ease-in-out; /* 动画缓动 */
transform: rotate(-180deg);
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-180deg);
}
}