Question

我想问一下，这个CSS代码有什么问题？它用于动画背景图像 - 缩放效果。

@media (min-width: 1000px) {
  .anim-on {
    background-size: 110% 110%;
    background-position: center center;
    animation: shrink 12s infinite alternate;
  }
  .anim-out {
    background-size: 120% 120%;
    background-position: center center;
    animation: small 6s infinite alternate;
  }
  @keyframes shrink {
    0% {
      background-size: 110% 110%;
    }
    100% {
      background-size: 100% 100%;
    }
  }
  @keyframes small {
    0% {
      background-size: 100% 100%;
    }
    100% {
      background-size: 110% 110%;
    }
  }
}

这段代码产生了很好的效果，但是我看到，在较慢的机器上，影响很糟糕。

有什么问题？或者也许有人有更好的想法，如何以更好的技术创造这种效果？

Answer 1

背景大小是一种视觉属性，因此对其值的任何更改都会导致重新绘制。绘画是一项非常昂贵的操作，必然会对低端机器的性能产生影响。解决此问题的一种方法是使用CSS transform（精确缩放）而不是background-size更改来生成动画。

会影响性能的代码段

以下代码段使用与问题中相同的动画。当您运行此代码段并使用Chrome开发工具检查它时（通过启用＆＃34;显示绘制矩形＆＃34;选项），您会看到两个图像都有与其关联的绘图矩形（绿色或红色框）并且当动画发生时，盒子一直闪烁（或保持原样）。这表明重绘经常发生，因此会影响性能。

＆＃13;

.anim-on,
.anim-out {
  height: 200px;
  width: 200px;
  background: url(http://lorempixel.com/200/200/nature/1);
}
.anim-on {
  background-size: 110% 110%;
  background-position: center center;
  animation: shrink 12s infinite alternate;
}
.anim-out {
  background-size: 120% 120%;
  background-position: center center;
  animation: small 6s infinite alternate;
}
@keyframes shrink {
  0% {
    background-size: 110% 110%;
  }
  100% {
    background-size: 100% 100%;
  }
}
@keyframes small {
  0% {
    background-size: 100% 100%;
  }
  100% {
    background-size: 110% 110%;
  }
}
/* Just for demo */

div {
  float: left;
  margin-right: 20px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class='anim-on'></div>
<div class='anim-out'></div>

＆＃13;

会对性能影响较小的代码段

在下面的代码段中，我已将background-image添加到伪元素，然后对其使用scale转换以产生放大/缩小效果。父{q} overflow: hidden设置可防止动画影响其大小。如果您使用Chrome开发工具进行检查，您会发现当页面加载并消失时，绿色或红色框只出现一次。这表明在动画本身期间没有进一步的重绘，因此从性能的角度来看它更好。您还会注意到此动画比前一个动画更加流畅。

＆＃13;

.anim-on,
.anim-out {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.anim-on:after,
.anim-out:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  background: url(http://lorempixel.com/200/200/nature/1);
}
.anim-on:after {
  animation: shrink 12s infinite alternate;
}
.anim-out:after {
  animation: small 6s infinite alternate;
}
@keyframes shrink {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes small {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
/* Just for demo */

div {
  float: left;
  margin-right: 20px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class='anim-on'></div>
<div class='anim-out'></div>

＆＃13;

您可以在CSS Triggers website找到有关各种CSS属性的更多信息，以及对其值的更改将如何影响渲染过程。

您可以找到有关呈现过程的更多信息，以及如何使用transform（而不是其他少数属性）在以下文章/网站中提高效果：

Answer 2

我编辑了亨利代码，现在css是可重用的，因此用户可以通过CMS将背景图像添加到元素中，而css代码将完成其余的工作：

import RealmSwift

class NotificationList: Object {
    dynamic var title = ""
    dynamic var body = ""
    dynamic var createdAt = NSDate()
    let notifications = List<Notification>()


// Specify properties to ignore (Realm won't persist these)

//  override static func ignoredProperties() -> [String] {
//    return []
//  }

}

谢谢*：）

Css动画 - 动画很慢而且摇摇欲坠

2 个答案: