Несколько переходов CSS.
-
26-12-2019 - |
Вопрос
Я пытаюсь сделать несколько переходов на состояние Hover.
Я хочу, чтобы изображение сначала повернуто к
Я пробовал:
-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