Как Fade In / Out несколько текстов, используя CSS / jQuery, как на Droplr?

мы видели этот тип анимации на веб-сайте как раз тогда, когда ключевые кадры CSS3 начали набирать обороты, но не моглия не могу найти его и не могу воспроизвести его с помощью CSS или jQuery, а здесьЯ думал, что некоторые из вас могут помочь.

оживили то, чего я надеюсь достичь, и ямы встроили его ниже. Я считаю, что это может быть закодировано с помощью новых ключевых кадров CSS3 или jQuery 's .animate (); особенность. Я нея знаю Я'Я перепробовал все, что знаю, но все тщетно.

Вот's GIF анимация того, что я хотел:

Я только заметил,http://droplr.com/ использует очень похожий переход на своей домашней странице, но с несколькими скользящими эффектами. И данные (слова), которые появляются все случайные, все время. Я'хотелось бы знать, как это возможно!

Ответы на вопрос(5)

Решение Вопроса

что этот вопрос решен, но я подумал, что это может быть полезно для кого-то еще, поэтому я решил поделиться xD

Я искал что-то более гладкое, чем sugestion, которое здесь было представлено, потратив некоторое время на поиски, я сделал свое собственное решение

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

div{
  posititon: relative;
}
.js-nametag{
  position: absolute;
}
.js-nametag:nth-child(1){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;  
}


.js-nametag:nth-child(2){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes fade{
    0%,50% {
      opacity: 0;
}
    100%{
      opacity: 1;
  }
}
  <p class="js-nametag">Leandro de Lima</p>
  <p class="js-nametag">Game Master</p>

DEMO

Возможное решение с чистым CSS!

@-webkit-keyframes fade-in{
from{
    opacity:1;
    top:0px;
}
to{
    opacity:0;
    top:-5px;
}
}
.text-animated-one{
display:inline;
position:relative;
top:0px;
-webkit-animation:fade-in 1s infinite;

}
.text-animated-two{
opacity:0;
display:inline;
position:relative;
margin-left:-56px;
-webkit-animation:fade-in 1s infinite;
-webkit-animation-delay:0.5s;
}

.aggettivi{
display:inline;
width:100px;
height:100px;
}
 Jay Bhalodi06 мар. 2019 г., 08:08
это не работает, пока ваш анимированный текст занимает больше одной строки
 Amruth Pillai23 июн. 2013 г., 07:26
Отлично! : D Спасибо большое!

JSFiddle Demo

HTML

<p>I am <span>Something</span><span class="hidden">Test22222</span></p>

CSS

.hidden {display:none;}
span { position: absolute; left:45px; top:10px;}
p {width:200px; border:1px solid #000; padding:10px; position:relative;}

JQuery

$(document).ready(function() {

    // run the fade() function every 2 seconds
    setInterval(function(){
        fade();
    },2000);


    // toggle between fadeIn and fadeOut with 0.3s fade duration.
    function fade(){
        $("span").fadeToggle(300);
    }

});

Заметка : это работает только с переключением 2 слов, может быть, лучше иметь массив слов и написать функцию для их обхода и применения анимации `fadeIn / fadeOut.

редактировать : Вот решение для нескольких слов -https://stackoverflow.com/a/2772278/2470724 он используетarray хранить каждое слово, а затем проходит через них.

Редактировать 2 Решение без массивов:http://jsfiddle.net/kMBMp/ Эта версия проходит черезun-ordered list у которого естьdisplay:none в теме

 Amruth Pillai22 июн. 2013 г., 21:33
Я как раз собирался попросить у вас вариант для большего количества слов! : D Функциональный цикл? Моя ошибка в том, что я подумал, что это будет прогулка по парку, чтобы кодировать: P Спасибо, что нашли время, чтобы написать это, хотя…Конечно, полезно. Ознакомьтесь с моей редакцией вопроса, возможно, вы сможете пролить свет на эту тему.
 Nick R22 июн. 2013 г., 21:41
@Amruth A. Pillai Я только что нашел то, что вы хотите для нескольких слов -stackoverflow.com/a/2772278/2470724 Это то, что я думал написать для решения. Итак, у вас естьarray слов. Как этоvar terms = ["term 1", "term 2", "term 3"]

вероятно, заключается в использовании плагина Morphext jQuery:

https://github.com/MrSaints/Morphext

Это's приведенный в действие animate.css, так чтоЛегко изменить стиль анимации текста.

Если ты'Вы ищете что-то более мощное (можете указать анимацию AND out; анимировать не только текст),Побочный продукт под названием Morphist:

https://github.com/MrSaints/Morphist

что я могу ответить на свой вопрос, и как раз вовремя!

Если кто-то из вас хотел бы узнать, как это можно сделать, посмотрите фрагмент кода CodePen, который я написал:http://codepen.io/AmruthPillai/pen/axvqB

 Nick R22 июн. 2013 г., 22:28
Рад, что вы нашли решение :) Ну, я переписал пример, который я нашел (тот, который использовалarray хранить слова) - это моя модифицированная версия -jsfiddle.net/kMBMp/1 Это работает, проходя черезunordered список, который имеетdisplay:none в теме. Так что этот метод определенно работал бы, если бы слова были.dynamically generated
 Amruth Pillai22 июн. 2013 г., 21:56
@ Nick-R Этот метод включал необходимость самостоятельно вводить слова в скрипт jQuery. Как насчет того, когда контент является динамическим? Во всяком случае, я нашел способ сделать это, используя HTML в качестве источника данных и jQuery в качестве аниматора. Проверьте ссылку в ответе выше! :)

Ваш ответ на вопрос