小编Pio*_*otr的帖子

如何在悬停后将鼠标移出动画

这正是我想要实现的目标(当我悬停时动画开始并在我悬停后启动).我只是不希望动画开始,直到我将鼠标悬停在对象上.在代码中,动画在刷新后立即启动.

.class {
  animation-name: out;
  animation-duration: 2s;
  /* Safari and Chrome: */
  -webkit-animation-name: out;
  -webkit-animation-duration: 2s;
}
.class:hover {
  animation-name: in;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  /* Safari and Chrome: */
  -webkit-animation-name: in;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}
@keyframes in {
  from {
    transform: rotate(50deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes in
/* Safari and Chrome */

{
  from {
    transform: rotate(50deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes out {
  from {
    transform: …

Run Code Online (Sandbox Code Playgroud)

javascript css css3 css-animations

Pio*_*otr

2015 09-02

5
推荐指数

1
解决办法

3892
查看次数

使用CSS Transition缩放图像

这就是我想要平滑地缩放图像而没有任何跳跃的方式。

我的尝试不像上面的画廊那样工作，图像（在我的情况下为红色方块）跳了，我的代码是：

section {
    background-color: rgba(0, 0, 0, 0.701961);
    width: 400px;
    height: 400px;
}

div {
    position: absolute;
    top: 120px;
    left: 120px;
    width: 160px;
    height: 160px;
    background-color: red;
    -webkit-transition: all .2s ease-in-out;

}

div:hover {
    -webkit-transform: scale(1.8);
}

Run Code Online (Sandbox Code Playgroud)