Question

这是我的问题，我的代码在这里，并且有效。唯一的问题是，当我带走.shake:hover,时，我似乎无法使其发挥作用。

我想让图像连续摇晃，无论它是否悬停在上面。简而言之，我希望它能够独立运行。

CSS

body {
    background-color:transparent;
}

img {
    display: block;
    height: 250px;
    width: 250px;
}

@-webkit-keyframes spaceboots {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

.shake:hover,
.shake:focus {
    -webkit-animation-name: spaceboots;
    -webkit-animation-duration: 0.8s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

HTML

<body>
    <center>
        <section class="content">
            <h1></h1>
            <br>
            <br>
            <img src="http://image.flaticon.com/teams/new/1-freepik.jpg" class="shake">
            <h2 class="shake"></h2>
        </section>
    </center>
</body>

Answer 1

替换

.shake:hover,
.shake:focus {

与

.shake {

这是小提琴：

https://jsfiddle.net/q245wpg3/1/

Answer 2

你只需删除：hover和.shake：focus，所以它看起来像那样：

.shake {
  -webkit-animation-name: spaceboots;
  -webkit-animation-duration: 0.8s;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

工作小提琴：http://jsfiddle.net/fthLwct0/2

Answer 3

将.shake：hover，.shake：focus替换为以下css

  .shake {
    -webkit-animation-name: spaceboots;
    -webkit-animation-duration: 0.8s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    }

Answer 4

听听您需要支持哪些浏览器会很有趣。由于您只访问支持前缀 -webkit - 。

的浏览器

此代码适用于最新的Chrome和Firefox浏览器：

// Removed 'hover' and 'focus'        
.shake {
        -webkit-animation-name: spaceboots;
        -webkit-animation-duration: 0.8s;
        -webkit-transform-origin:50% 50%;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
    }

但是它在IE11中不起作用。

如果您想支持各种各样的浏览器，您将无法使用动画。

所以你的选择是：

查看您是否可以在http://caniuse.com/
在工作流程中使用前缀。你需要一个像Gulp / Grunt这样的任务管理员来使用Autoprefixer：https://github.com/postcss/autoprefixer
使用像Animate.css这样的CSS库。那些人会担心浏览器支持最多的工作（请记住，您需要查看文档以获取浏览器支持信息）：https://daneden.github.io/animate.css/

希望这有帮助。

此致 Megajin

无需悬停/鼠标悬停即可制作CSS / HTML图像摇动代码触发器

4 个答案: