CSS-анимация с плавным эффектом для зависания - PullRequest
Новая
       16

CSS-анимация с плавным эффектом для зависания

0 голосов
/ 08 апреля 2019

Я пытаюсь получить плавную анимацию "зависания", когда вы прекращаете наводить объект. Превосходный значок со шрифтом вращается при наведении курсора на всю кнопку.

Я использую это: 

@keyframes roll {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}

.p-navEl a:first-child:hover::before {
    animation: roll .5s linear infinite;
}

HTML для первой кнопки навигационной панели 

<ul class="p-nav-list js-offCanvasNavSource">
  <li>
    <div class="p-navEl is-selected" data-has-children="true">
      <a href="#" class="p-navEl-link p-navEl-link--splitMenu " data-nav-id="forums">Forums</a>
      <a data-xf-key="1" data-xf-click="menu" data-menu-pos-ref="< .p-navEl" data-arrow-pos-ref="< .p-navEl" class="p-navEl-splitTrigger" role="button" tabindex="0" aria-label="Basculer en mode étendu" aria-expanded="false" aria-haspopup="true"></a>
      <div class="menu menu--structural" data-menu="menu" aria-hidden="true">
        <div class="menu-content">
          <a href="#" class="menu-linkRow u-indentDepth0 js-offCanvasCopy " data-nav-id="newPosts">Nouveaux messages</a>
          <a href="#" class="menu-linkRow u-indentDepth0 js-offCanvasCopy " data-nav-id="findThreads">Trouver des discussions</a>
          <a href="#" class="menu-linkRow u-indentDepth1 js-offCanvasCopy " data-nav-id="yourThreads">Vos discussions</a>
          <a href="#" class="menu-linkRow u-indentDepth1 js-offCanvasCopy " data-nav-id="contributedThreads">Discussions avec vos messages</a>
          <a href="#" class="menu-linkRow u-indentDepth1 js-offCanvasCopy " data-nav-id="unansweredThreads">Discussions sans réponse</a>
          <hr class="menu-separator">
          <a href="#" class="menu-linkRow u-indentDepth0 js-offCanvasCopy " data-nav-id="watched">Suivies</a>
          <a href="#" class="menu-linkRow u-indentDepth1 js-offCanvasCopy " data-nav-id="watchedThreads">Discussions suivies</a>
          <a href="#" class="menu-linkRow u-indentDepth1 js-offCanvasCopy " data-nav-id="watchedForums">Forums suivis</a>
          <hr class="menu-separator">
          <a href="#" class="menu-linkRow u-indentDepth0 js-offCanvasCopy " data-nav-id="searchForums">Rechercher dans les forums</a>
          <a href="#" class="menu-linkRow u-indentDepth0 js-offCanvasCopy " data-xf-click="overlay" data-nav-id="markForumsRead">Marquer les forums comme lus</a>
        </div>
      </div>
    </div>
  </li>
</ul>

PREVIEW

Пузырь перед «ФОРУМАМИ» вращается, когда вы наводите его. Но я хочу, чтобы анимация была плавной, когда вы перестанете зависать

Preview

но когда вы больше не наводите ссылку, анимация жестоко останавливается.

Есть идеи?

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

1 Ответ

0 голосов
/ 08 апреля 2019

Пожалуйста, попробуйте переходы, как показано ниже, и дайте мне знать скрипка !.

HTML 

<body bgcolor="#333">
  <div class="display-center">
     <span>Rotate</span>
  </div>
</body>

Css 

.display-center{
  display:flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  width: 100%;
  background-color: white;
}
span {
  background-color: gray;
  padding: 10px;
  border-radius: 8px;
  color: #222;
  text-align: center;
    transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  display: block;
  margin-right: auto;
  margin-left: auto;
}
span:hover {
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
...