小编gbu*_*ing的帖子

我知道之前有人问过,但我仍然不相信没有解决办法.我不相信的原因是因为我意外地将这些GIF动画保存在我的网站上.我在聊天中发布了这个,在@CarrieKendall的帮助下想出了这个小提琴.

这显然不是一个合适的解决方案,所以我想在这里发帖给你天才选择分开并试图帮我弄清楚如何解决这个问题(最好不要太多资源)？

更新:

好的,所以我用jsfiddle修改了一下并想出了这个:

HTML

<img class="link" src="http://i.imgur.com/jsm0x2c.gif">
<img class="link" src="http://i.imgur.com/jsm0x2c.gif">
<img class="link" src="http://i.imgur.com/jsm0x2c.gif">

CSS

@-webkit-keyframes WIGGLE {
  0%   { -webkit-transform: translate(0px, 0px); }
  100%   { -webkit-transform: translate(0px, 0px); }
}

keyframes WIGGLE {
  0%   { -webkit-transform: translate(0px, 0px); }
  100%   { -webkit-transform: translate(0px, 0px); }
}

.link{
  -webkit-animation: WIGGLE 1ms; 
          animation: WIGGLE 1ms;
}

这很奇怪,但它确实有效.绝对没有任何动画的动画.哦,我尝试用缩放比较替换翻译但是没有做到这一点.这是这个奇怪的bug /解决方案的"最纯粹"形式.

尽管如此,我还不太满意.我喜欢它,如果一个比我更有知识的人可以看看这个,并试图找出真正发生的事情,这使得这个解决方法......工作.希望这里有一些可以使用的东西,尽管是以更优雅的方式.

此外,我不知道像上面的解决方法那样资源密集的东西是什么,所以如果有人可以帮助我衡量那是非常棒的.

见下文.我使用当前代码时遇到的问题是Sourcemaps没有通过Browsersync注入.我在这里错过了什么或做错了吗？

供参考:https: //www.browsersync.io/docs/gulp/#gulp-sass-maps

// requirements
var gulp         = require('gulp');
var sass         = require('gulp-ruby-sass');
var browserSync  = require('browser-sync').create();
var prefix       = require('gulp-autoprefixer');
var rename       = require('gulp-rename');
var sourcemaps   = require('gulp-sourcemaps');
var cssclean     = require('gulp-clean-css');

// create sass tasks
gulp.task('sass', function() {
  return sass('assets/scss/style.scss', {sourcemap: true, style: 'compact'})
    .on('error', function (err) {
        console.error('Error!', err.message);
    })
    .pipe(rename({suffix: '.min'}))
    .pipe(cssclean())
    .pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR"))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('assets/styles'))
    .pipe(browserSync.stream({match: '**/*.css'}))
});

gulp.task('serve', ['sass'], function() {

  browserSync.init({
    proxy: …