CSS-анимация начинается с зависания, затем останавливается

заранее за любую помощь.CSS-анимация начинается с зависания, затем останавливается

Я работал с несколькими эффектами, чтобы найти что-то мне нравится, и наткнулся на этом сайте: https://www.marieforleo.com/

3-й раздел вниз (черный вд) есть слово «ничего» подчеркнуто, и когда вы переверните его, он устанавливает последовательность, в которой это слово изменяется на множество других слов.

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

Спасибо всем!

источник

2016-12-18 Jordan Warner

Покажите нам, что вы попробовали? –

Привет, Saurav, спасибо! Этот тип кода не является моим основным forte, поэтому я в основном адаптировал другие вещи, которые я нашел. Я пробовал работать с ними (https://codyhouse.co/gem/css-animated-headlines/) и ему понравилось, но эффект был слишком навязчивым для того, что нам нужно. Я также пробовал https://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/, но не смог найти способ остановить циклическую анимацию, что сделало ее чрезмерно отвлекающей. Для этих целей я начал понимать, что что-то на hover будет работать лучше, что привело меня к тому эффекту, который я опубликовал. Помимо этого, я не знаю, с чего начать. –

Вот один из способов сделать это с чистым CSS: «живой» содержание псевдо элемента

.words::before { 
 
    content: "hello"; 
 
} 
 

 
.words:hover::before { 
 
    animation: rotateWords 5s; 
 
} 
 

 
@keyframes rotateWords { 
 
    20% { content: 'world' } 
 
    40% { content: 'foo' } 
 
    60% { content: 'bar' } 
 
    80% { content: 'lorem' } 
 
    100% { content: 'ipsum' } 
 
}

<span class="words"></span>

источник

2016-12-18 05:41:46 Aziz

Привет, Азиз, спасибо за замечательный ответ! Это отличное начало. Любой способ рандомизировать результаты, а не показывать их в одном порядке каждый раз? –

Еще одно примечание. Я заметил на marieforleo.com, что верхний левый логотип в самой верхней части страницы имеет аналогичный эффект. Еще раз спасибо за быструю помощь! –

Вы можете использовать JavaScript для случайного выбора слова и ввести его при наведении курсора мыши , Если это не то, что вы ищете, вы можете использовать цикл for в sass mixin. Что-то вроде этого должно работать.

@mixin randomword 

$words: word1, word2, word3; //array with desired words 

@for $i from 1 through length($words) { //this loops through the array 
    .words:hover { 
    content: nth($words,random(length($words)); //random number generator 
    } 
}

Это должно выбрать слово из списка слов слов в случайном положении между 1 и длиной списка слов. Это будет означать, что ваше начальное слово извлекается из блока содержимого.

источник

2016-12-24 17:16:27

CSS-анимация начинается с зависания, затем останавливается

ответ

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