html - div 悬停时横向摇晃(仅限 CSS3)

Question

仍在继续我的 css3 冒险!基本上，我试图在悬停时巧妙地左右摇动一个 div。我相信我的大部分标记和样式都是正确的，但它只是没有触发。希望对此有所了解。非常感谢任何帮助。

代码如下。

<div class="brief-boxes">
        <div class="details-box">
            <div class="stats">
                <p class="number">1</p>
                <p class="stat-title">title</p>
            </div>
        </div>

        <div class="details-box">
            <div class="stats">
                <p class="number">2</p>
                <p class="stat-title">title</p>
            </div>
        </div>

        <div class="details-box">
            <div class="stats">
                <p class="number">3</p>
                <p class="stat-title">title</p>
            </div>
        </div>
</div>

.brief-boxes {width:100%;}
    .brief-boxes .details-box {color:#fff; float:left; width:32.7%;padding:10px; margin-top:15px;/*min-height:100px;*/ background-color:yellow;}
    .brief-boxes:after {clear:both;display:block;content:'';}
    .brief-boxes .details-box .stats .number {font-size:40px;}
    .brief-boxes .details-box .stats .stat-title {}

CSS3 动画:

.details-box:hover {
  animation: shake .5s ease-in-out;
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-10px);
  }

  40% {
    transform: translateX(10px);
  }

  60% {
    transform: translateX(-10px);
  }

  80% {
    transform: translateX(10px);
  }

  100% {
    transform: translateX(0);
  }
}

再次感谢您的宝贵时间。

Answer 1

您是否在 Chrome 等 webkit 浏览器中查看您的代码？您需要确保包含适当的浏览器前缀:

.brief-boxes {width:100%;}
    .brief-boxes .details-box {color:#fff; float:left; width:32.7%;padding:10px; margin-top:15px;/*min-height:100px;*/ background-color:yellow;}
    .brief-boxes:after {clear:both;display:block;content:'';}
    .brief-boxes .details-box .stats .number {font-size:40px;}
    .brief-boxes .details-box .stats .stat-title {}

.details-box:hover {
  -webkit-animation: shake .5s ease-in-out;
  animation: shake .5s ease-in-out;
}
@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(0);
  }

  20% {
    -webkit-transform: translateX(-10px);
  }

  40% {
    -webkit-transform: translateX(10px);
  }

  60% {
    -webkit-transform: translateX(-10px);
  }

  80% {
    -webkit-transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-10px);
  }

  40% {
    transform: translateX(10px);
  }

  60% {
    transform: translateX(-10px);
  }

  80% {
    transform: translateX(10px);
  }

  100% {
    transform: translateX(0);
  }
}

<div class="brief-boxes">
        <div class="details-box">
            <div class="stats">
                <p class="number">1</p>
                <p class="stat-title">title</p>
            </div>
        </div>

        <div class="details-box">
            <div class="stats">
                <p class="number">2</p>
                <p class="stat-title">title</p>
            </div>
        </div>

        <div class="details-box">
            <div class="stats">
                <p class="number">3</p>
                <p class="stat-title">title</p>
            </div>
        </div>
</div>

Caniuse是确定您是否需要包含浏览器前缀的重要资源。