Question

我创建了一个动画，可以在以下FIDDLE中看到。为了创建动画，我使用了以下CSS代码和HTML CODE：

HTML

<div>
  <h2>
    Welcome
    <span>:)</span>
  </h2>
 </div>

CSS

*{
  font-size:28px;
  margin:20px;
}
div span{
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: spin;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-name: spin;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease-in-out;

    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;    
    display:inline-block;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(90deg);
    }
}

在演示中我可以看到旋转笑脸。我想要实现的是表情符号保持在最后位置。有没有人知道如何在不使用Javascript的情况下解决这个问题？

Answer 1

添加：

＆＃13;

animation-fill-mode: forwards;

＆＃13;

CSS3动画并保持结束位置

1 个答案: