Имейте изображение, затухание, падение и отскок один раз в позиции

Я пытаюсь создать эффект, когда изображение затухает и опускается вниз, отскакивает один раз, прежде чем опускаться обратно в самое нижнее положение.Имейте изображение, затухание, падение и отскок один раз в позиции

У меня есть постепенное уменьшение, но его падение падает, прежде чем остановить, что я не могу работать.

Я нашел этот код: http://codepen.io/Dingerzat/pen/wozrjg из этой темы: CSS Animation/ Moving an image up the screen with @KEYFRAMES, который хорошо работает с затуханием, но я не уверен, как заставить его упасть, отскочить один, а затем снова вернуться в самую низкую точку.

Это моя текущая версия: http://codepen.io/Dingerzat/pen/mOrBWd

$('#gallery img').each(function(i) { 
    $(this).delay(i*200).fadeIn('slow'); 
});

HTML

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Delayed image load in</title> 
</head> 
<style> 
#float{ 
position: relative; 
-webkit-animation: floatBubble 2s 2; 
    -webkit-animation-direction:alternate; 
    } 


@-webkit-keyframes floatBubble{ 
from{ 
     top:0; 
     -webkit-animation-timing-function: ease-in; 

    } 


    to { 
     top: 50px; 
     -webkit-animation-timing-function: ease-out; 
    } 

} 
</style> 
<body> 
    <div id="gallery"> 
    <img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon1.png" id="float" alt="" width="125" /> 
    <img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon2.png" id="float" alt="" width="125" /> 
    <img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon3.png" id="float" alt="" width="125"/> 
    <img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon4.png" alt="" width="125"/> 
    <img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon5.png" alt="" width="125"/> 
    <img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon6.png" alt="" width="125"/> 
    <img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon7.png" alt="" width="125"/> 
    <img src="" alt="" /> 
    <img src="" alt="" /> 
    <img src="" alt="" /> 
    </div> 
</body> 
</html>

источник

2016-11-16 Schro

У вас есть функция -webkit-animation-timing-timing: ease-out; в объявлении ключевого кадра он не принадлежит, он принадлежит селектору #float. – Kyle

Это может показаться глупым вопросом, но как он в настоящее время нарушает код? – Schro

Наверное, перебор, но посмотрите на jquery-ui easing –

Является ли это то, что вы хотели? CODEPEN

В основном я просто избавился от альтернативной вещи и написал анимацию в процентах. И вам также нужно настроить режим анимации-fill-mode на «вперед», чтобы он оставался там, где заканчивается анимация.

#float{ 
    position: relative; 
    -webkit-animation: floatBubble 2s; 
    animation-fill-mode: forwards; 
} 


@-webkit-keyframes floatBubble{ 
    0%{ 
     top:0; 
     -webkit-animation-timing-function: ease-in; 
    } 

    33% { 
     top: 50px; 
     -webkit-animation-timing-function: ease-out; 
    } 

    66% { 
     top:0; 
     -webkit-animation-timing-function: ease-in; 
    } 

    100% { 
     top:50px; 
     -webkit-animation-timing-function: ease-in; 
    } 
}

источник

2016-11-16 11:32:53 TomasB

Это именно то, что я хотел! Спасибо! – Schro

Имейте изображение, затухание, падение и отскок один раз в позиции

ответ

Смежные вопросы