Всем привет!
Подскажите пожалуйста, как сделать "плавность" анимации.
У меня есть @keyframes, который описывает поведение анимации при загрузки.
А при ховере, подключается другой @keyframes (анимация и ее ход меняется).
Между их сменой происходит резкость.
Вот пример резкости http://jsfiddle.net/g4wvqrL8/
Вопрос: как при разных @keyframes при ховере сделать плавную смену 2х типов анимация?
Пробовала делать transition (смещала их на нужную траекторию при ховере и начинать новую анимацию, но плавность все равно не было).
Или же как начинать анимацию с места, где остановилась анимация до этого??
Подскажите , всем заранее спасибо!
.icon-1 {
width: 3em;
height: 3em;
margin: 85px auto;
animation: pull 3s infinite reverse ease-in-out
}
.icons {
width:80%;
margin: 0 auto;
height:90px;
}
.icons:hover {
animation: rotate360 4s infinite reverse cubic-bezier(0.4, 0, 1, 1);
}
@keyframes pull {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-55px);
}
100%{
transform: translateY(0px);
}
}
@keyframes rotate360 {
0% {
transform: rotate(0deg) translateX(30px);
}
100% {
transform: rotate(360deg) translateX(30px);
}
}
Ответ
Один из вариантов, отловить конец итерации анимации и потом ее отключить.
Возможно вам нужно подправить размеры контейнеров, так как при вращении мышь сходит с контейнера.
http://jsfiddle.net/g4wvqrL8/3/
$(function() {
function whichTransitionEvent() {
var t,
el = document.createElement("fakeelement");
var transitions = {
"transition": "animationiteration",
"OTransition": "oanimationiterationd",
"WebkitTransition": "webkitAnimationIteration"
}
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
}
var transitionEvent = whichTransitionEvent();
var $icons = $(".icons"),
$icon1 = $(".icon-1");
$icons.hover(
function() {
var self = $(this);
$icon1.addClass("pause");
$icons.addClass("animate-rotate");
}, function() {
$icons.one(transitionEvent, function(event) {
$icons.removeClass("animate-rotate");
$icon1.removeClass("pause");
});
}
);
});
.icon-1 {
width: 3em;
height: 3em;
margin: 85px auto;
animation: pull 3s infinite reverse ease-in-out
}
.icons {
width: 80%;
margin: 0 auto;
height: 90px;
}
.pause {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.animate-rotate {
animation: rotate360 4s infinite reverse forwards cubic-bezier(0.1, 0, 1, 1);
}
@keyframes pull {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-55px);
}
100% {
transform: translateY(0px);
}
}
@keyframes rotate360 {
100% {
transform: rotate(1turn);
}
}
Комментариев нет:
Отправить комментарий