Есть ли аналог в css?

Question

[olya_097]

ТАк просто не отрабатывает

var main = $(".owl-carousel");
  main.owlCarousel({
        animateIn: 'fadeIn',
        animateOut: 'fadeOut'
    });

Answer 1

[origami1024]

.fin{
  animation: fadein 3s;
}
.fout{
  animation: fadeout 3s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

https://jsfiddle.net/7Lj41awg/

Comments

[olya_097]

origami1024, спасибо
Только вопрос
Вы привели привели пример текстом и эффектом опасити
А что мне анимирововать если у меня текстовый слайдер, сбоку справа то что на скрине ниже?

[Rustam Bainazarov]

olya_097, очень, блин, понятно, что у вас там по какой-то там картинке.

[olya_097]

Рустам Байназаров, https://codepen.io/Olya097/pen/KKPLrxN
примерно такое
немного криво перенеслось

но вся суть перенеслась

[Rustam Bainazarov]

olya_097, ну, тогда вам эта анимация не подходит, ибо тут нужно после визуального скрытия ещё и в display: none уводить ненужные секции, чтобы размеры менять. Что, собственно, и делает механизм работы fadeIn и fadeOut в jQuery.

[olya_097]

Рустам Байназаров, а что подходит? не совсем поняла
Есть пример?

upd. и что нужно поправить чтобы точка плавно переезжала с места на место?

[Rustam Bainazarov]

olya_097, хотя я вас, наверное, неправильно понял в итоге, что вам надо.

Чтобы плавно двигалась, надо сделать модификацию скрипта слайдера, либо JS-надстройку. Типа следить за активным буллитом и двигать кружок.

[olya_097]

Рустам Байназаров, JS-надстройка скорее всего