CSS Animation: анимация Fade in + для каждого слова не работает - PullRequest
Новая
       23

CSS Animation: анимация Fade in + для каждого слова не работает

0 голосов
/ 09 июня 2019

Я пытаюсь заставить каждое слово начинаться с 0 непрозрачности и переводить Y (65px).Затем постепенно переходите к одному слову за раз, переходя к translateY (0).Каждое слово исчезает, но не переводится.Вот пример того, что я пытаюсь выполнить: https://www.bigdropinc.com/ (прокрутите вниз до абзаца) 

var $el = $(".example:first"), text = $el.text(),
    words = text.split(" ");

var html = "";
for (var i = 0; i < words.length; i++) {
    html += "<span>" + words[i] + " </span>";
};
$el.html(html).children().each(function(i){
  $(this).addClass('fadeInUp');
});
@keyframes fadeInUp{
    0%{
    transform: translateY(65px);
    opacity: 0;
    }
    100%{
        opacity:1;
        transform:none;
    }
}
.fadeInUp{
    transition: opacity .5s ease-in-out,transform .8s ease-in-out,-webkit-transform .8s ease-in-out;
    animation:fadeInUp 3s forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example">
    These are some words that should be faded in and transformed one after the other.
</div>

1 Ответ

0 голосов
/ 09 июня 2019

Вам нужно изменить свойство отображения, чтобы преобразование работало вообще: 

var $el = $(".example:first"), text = $el.text(),
    words = text.split(" ");

var html = "";
for (var i = 0; i < words.length; i++) {
    html += "<span>" + words[i] + " </span>";
};
$el.html(html).children().each(function(i){
  $(this).addClass('fadeInUp');
});
@keyframes fadeInUp{
    0%{
    transform: translateY(65px);
    opacity: 0;
    }
    100%{
        opacity:1;
        transform:none;
    }
}
.fadeInUp{
    transition: opacity .5s ease-in-out,transform .8s ease-in-out,-webkit-transform .8s ease-in-out;
    animation:fadeInUp 3s forwards;
    display: inline-block;
    margin-right: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example">
    These are some words that should be faded in and transformed one after the other.
</div>
...