Как заставить работать transition?
Добрый день!
Прошу указать что не так, в чём ошибка?
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS Mega Menu Navigation</title> <script src="https://use.fontawesome.com/50e4eff350.js"></script><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <section class="container"> <h1>Pure CSS Mega Menu Navigation</h1> <h2>Not a single line of jQuery in sight!</h2> </section><!-- .container --> <nav> <ul class="container ul-reset"> <li><a href='#'>Home</a></li> <li class='droppable'> <a href='#'>Category One</a> <div class='mega-menu'> <div class="container cf"> <ul class="ul-reset"> <h3>Heading 1</h3> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3>Heading 2</h3> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3>Heading 3</h3> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3>Heading 4</h3> <li><img src="http://placehold.it/205x172"></li> </ul> </div><!-- .container --> </div><!-- .mega-menu --> </li><!-- .droppable --> <li class='droppable'> <a href='#'>Category Two</a> <div class='mega-menu'> <div class="container cf"> <ul class="ul-reset"> <h3>Heading 1</h3> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3>Heading 2</h3> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3>Heading 3</h3> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3>Heading 4</h3> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> </ul><!-- .ul-reset --> </div><!-- .container --> </div><!-- .mega-menu--> </li><!-- .droppable --> <li><a href='#'>Category Three</a></li> <li><a href='#'>Category Four</a></li> <li><a href='#'>Category Five</a></li> <li><a href='#'>Category Six</a></li> </ul><!-- .container .ul-reset --> </nav> <!-- partial --> </body> </html> |
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS Mega Menu Navigation</title> <script src="https://use.fontawesome.com/50e4eff350.js"></script><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <section class="container"> <h1>Pure CSS Mega Menu Navigation</h1> <h2>Not a single line of jQuery in sight!</h2> </section><!-- .container --> <nav> <ul class="container ul-reset"> <li><a href='#'>Home</a></li> <li class='droppable'> <a href='#'>Category One</a> <div class='mega-menu'> <div class="container cf"> <ul class="ul-reset"> <h3>Heading 1</h3> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3>Heading 2</h3> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3>Heading 3</h3> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> <li><a href='#'>Category One Sublink</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3>Heading 4</h3> <li><img src="http://placehold.it/205x172"></li> </ul> </div><!-- .container --> </div><!-- .mega-menu --> </li><!-- .droppable --> <li class='droppable'> <a href='#'>Category Two</a> <div class='mega-menu'> <div class="container cf"> <ul class="ul-reset"> <h3>Heading 1</h3> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3>Heading 2</h3> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3>Heading 3</h3> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3>Heading 4</h3> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> <li><a href='#'>Category Two Sublink</a></li> </ul><!-- .ul-reset --> </div><!-- .container --> </div><!-- .mega-menu--> </li><!-- .droppable --> <li><a href='#'>Category Three</a></li> <li><a href='#'>Category Four</a></li> <li><a href='#'>Category Five</a></li> <li><a href='#'>Category Six</a></li> </ul><!-- .container .ul-reset --> </nav> <!-- partial --> </body> </html>
CSS
/* #Resets –––––––––––––––––––––––––––––––––––––––––––––––––– */ html {box-sizing: border-box;} *, *:before, *:after {box-sizing: inherit; } /* #Universal and Default Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ body { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/323039/black-wood-small.jpg); color: #ddd; font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 1; margin: 0; padding: 0; text-align: center; } a {text-decoration: none;} h1 { font-size: 40px; font-weight: 700; margin-bottom: 20px; margin-top: 20px; } h2 { font-size: 15px; font-weight: 600; margin-bottom: 30px; margin-top: 10px; } .container { margin: auto; width: 940px; } .ul-reset { padding-left: 0; margin-top: 0; margin-bottom: 0; list-style: none; } /* #Navigation Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ nav { background: #424242; font-size: 0; position: relative; } nav > ul > li { display: inline-block; font-size: 14px; padding: 0 15px; position: relative; } nav > ul > li:first-child {padding-left: 0;} nav > ul > li:last-child {padding-right: 0;} nav > ul > li > a { color: #fff; display: block; position: relative; padding: 20px 0; border-bottom: 3px solid transparent; } nav > ul > li:hover > a { color: #69aae0; border-bottom: 3px solid #69aae0; } /* #Mega Menu Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ .mega-menu { background: #f0f0f0; /*transition: opacity 1s, display 2s;*/ display: none; /*opacity: 0;*/ left: 0; position: absolute; text-align: left; width: 100%; } .mega-menu h3 {color: #444;} .mega-menu ul { float: left; margin-bottom: 20px; margin-right: 40px; width: 205px; } .mega-menu ul:last-child {margin-right: 0;} .mega-menu a { border-bottom: 1px solid #ddd; color: #4ea3d8; display: block; padding: 10px 0; } .mega-menu a:hover {color: #2d6a91;} /* #Droppable Class Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ .droppable {position: static;} .droppable > a:after { content: "f107"; font-family: FontAwesome; font-size: 12px; padding-left: 6px; position: relative; top: -1px; } .droppable:hover .mega-menu {opacity: 1; transition: opacity 1s, opacity 2s; display: block;} /* #Browser Clearfix –––––––––––––––––––––––––––––––––––––––––––––––––– */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after {clear: both;} |
/* #Resets –––––––––––––––––––––––––––––––––––––––––––––––––– */ html {box-sizing: border-box;} *, *:before, *:after {box-sizing: inherit; } /* #Universal and Default Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ body { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/323039/black-wood-small.jpg); color: #ddd; font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 1; margin: 0; padding: 0; text-align: center; } a {text-decoration: none;} h1 { font-size: 40px; font-weight: 700; margin-bottom: 20px; margin-top: 20px; } h2 { font-size: 15px; font-weight: 600; margin-bottom: 30px; margin-top: 10px; } .container { margin: auto; width: 940px; } .ul-reset { padding-left: 0; margin-top: 0; margin-bottom: 0; list-style: none; } /* #Navigation Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ nav { background: #424242; font-size: 0; position: relative; } nav > ul > li { display: inline-block; font-size: 14px; padding: 0 15px; position: relative; } nav > ul > li:first-child {padding-left: 0;} nav > ul > li:last-child {padding-right: 0;} nav > ul > li > a { color: #fff; display: block; position: relative; padding: 20px 0; border-bottom: 3px solid transparent; } nav > ul > li:hover > a { color: #69aae0; border-bottom: 3px solid #69aae0; } /* #Mega Menu Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ .mega-menu { background: #f0f0f0; /*transition: opacity 1s, display 2s;*/ display: none; /*opacity: 0;*/ left: 0; position: absolute; text-align: left; width: 100%; } .mega-menu h3 {color: #444;} .mega-menu ul { float: left; margin-bottom: 20px; margin-right: 40px; width: 205px; } .mega-menu ul:last-child {margin-right: 0;} .mega-menu a { border-bottom: 1px solid #ddd; color: #4ea3d8; display: block; padding: 10px 0; } .mega-menu a:hover {color: #2d6a91;} /* #Droppable Class Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ .droppable {position: static;} .droppable > a:after { content: "f107"; font-family: FontAwesome; font-size: 12px; padding-left: 6px; position: relative; top: -1px; } .droppable:hover .mega-menu {opacity: 1; transition: opacity 1s, opacity 2s; display: block;} /* #Browser Clearfix –––––––––––––––––––––––––––––––––––––––––––––––––– */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after {clear: both;}
Задача: при :hover плавное появление при наведении и плавное исчезновении при ходе курсора.
Пытался через @keyframes
Работает, но только при наведении, при уходе нет, резко убирается.
transition:, как ни пытался, не работает ни при наведении, ни при уходе курсора.
Как это настроить?
Все примеры из гугла не помогли
Дополнительно:
вроде всё работает с такими объявлениями
.mega-menu { background: #f0f0f0; visibility: hidden; opacity: 0; transition: opacity 1s, visibility 1s; left: 0; position: absolute; text-align: left; width: 100%; } .droppable:hover > .mega-menu { visibility: visible; opacity: 1; } |
.mega-menu { background: #f0f0f0; visibility: hidden; opacity: 0; transition: opacity 1s, visibility 1s; left: 0; position: absolute; text-align: left; width: 100%; } .droppable:hover > .mega-menu { visibility: visible; opacity: 1; }
а причина неработы скорее всего была в использовании свойства display, которое ни разу не анимируемо
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы заставить работать transition в CSS, необходимо убедиться, что вы правильно задали все необходимые свойства. Transition позволяет плавно изменять свойства элемента при определенных событиях, таких как наведение курсора, изменение размера или цвета и т.д.
Вот несколько шагов, которые помогут вам заставить transition работать:
1. Укажите transition свойства в CSS для нужного элемента. Например, если вы хотите добавить плавное изменение цвета при наведении курсора, то ваш CSS код может выглядеть следующим образом:
.element { background-color: #ff0000; transition: background-color 0.3s; } .element:hover { background-color: #00ff00; }
2. Убедитесь, что у вас правильно указаны свойства для transition. Свойство transition состоит из четырех значений: свойство, время, функция анимации и задержка. Например:
transition: background-color 0.3s ease-in-out 0s;
3. Проверьте, что вы правильно указали событие, при котором должно происходить изменение. Например, если вы хотите, чтобы transition сработал при наведении курсора, используйте псевдокласс :hover.
4. Убедитесь, что у вас нет конфликтующих стилей или правил CSS, которые могут перекрывать ваш transition.
Если после этих шагов transition все еще не работает, попробуйте очистить кэш браузера, так как иногда изменения в CSS могут не отображаться из-за кэширования стилей. Также убедитесь, что ваш браузер поддерживает CSS transitions.
Надеюсь, эти советы помогут вам заставить transition работать на вашем веб-сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.