使用变换时，悬停留在最后一个关键帧CSS动画：旋转 [英] CSS animation on hover stay at last keyframe when using transform: rotate

问题描述

我试图让这个动画留在悬停的最后一个关键帧，但它一直回到原来的起点。如果我将鼠标悬停关闭其恢复，但不是悬停的时候，我不介意。我经历了很多的问题堆栈，大家看着说使用动画填充模式：前锋，但似乎并没有工作。

下面是我的code和一个链接的jsfiddle

  .circle：悬停.spin {
  -webkit-动画名：降;
  -webkit-动画持续时间：1秒;
  -webkit-动画迭代计数：1;
  -webkit-动画方向：备用;
  -webkit-动画定时功能：缓解出;
  -webkit-动画延迟：0;
  -webkit-动画填充模式：前锋;
}
@ -webkit-关键帧降{
  100％{
    -webkit-变换：旋转（90度）;
  }
}
 

解决方案

对于那些有过类似的问题，首先要确保您使用的是动画填充模式：转发。见<一href=\"http://stackoverflow.com/questions/20274230/cant-stop-css-animation-disappearing-after-last-key-frame\">this相关的问题。

在这种特定情况下，下面是相关的：

  

CSS变换模块级1

  
  

一个可转换的元素是一个元素，其布局由CSS盒模型，它可以是一个块级或的原子行内元素，或者其显示性能计算表行，表行组，表头组，表尾组，表单元格或表标题。

由于 .circle 元素是跨度，这是在线默认情况下，因此物业变换：旋转（）将不会有动画结束后对其产生的影响。更改显示它为 inline-block的或块将解决这个问题。

您也应该使用动画速记。此外，加入其他厂商prefixes：

的更新了例这里

  .circle：悬停.spin {
    显示：inline-block的;
    -webkit-动画：降1秒1备用易于转发出去;
    -moz-动画：降1秒1备用易于转发出去;
    动画：降1秒1备用易于转发出去;
}
 

I am trying to get this animation to stay in its last keyframe on hover but it keeps reverting back to the beginning. I don't mind if I hover off it reverts but not during the hover. I looked through a lot of stack questions and everyone said to uses the animation-fill-mode: forwards, but that doesn't seem to work.

Here is my code and a link to a jsfiddle

.circle:hover .spin {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-delay: 0;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes drop {
  100% {
    -webkit-transform: rotate(90deg);
  }
}

解决方案

For those of you with a similar problem, first make sure you are using animation-fill-mode: forwards. See this related question.

In this specific case, the following is relevant:

CSS Transforms Module Level 1

A transformable element is an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption.

Since the .circle element is a span, it is inline by default, therefore the property transform: rotate() won't have an effect on it after the animation ends. Changing the display of it to either inline-block or block will solve the problem.

You should also be using the animation shorthand. In addition, add in other vendor prefixes:

Updated Example Here

.circle:hover .spin {
    display:inline-block;
    -webkit-animation: drop 1s 1 alternate ease-out forwards;
    -moz-animation: drop 1s 1 alternate ease-out forwards;
    animation: drop 1s 1 alternate ease-out forwards;
}

这篇关于使用变换时，悬停留在最后一个关键帧CSS动画：旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！