联合国儿童基金会网络动画答案

【问题标题】：Unicef web animations联合国儿童基金会网络动画
【发布时间】：2017-03-09 15:00:10
【问题描述】：

谁能告诉我关于this联合国儿童基金会网站的门动画和缩放页面转换的任何信息，我想尝试制作这个很酷的动画。至少给我“关键字”如何找到它。是用html5做的吗？

【问题讨论】：

看源码怎么样？
@SamiKuhmonen 好点 ;) +1

标签： javascript css html web-animations

【解决方案1】：

在联合国儿童基金会动画中，开发人员使用了 JavaScript 的混合方法，使用 GSAP JS 库和 CSS 过渡。

您可以使用 Chrome 开发者工具查看 bundle.js 和 screen.css 文件中的代码。

一般你可以使用：

CSS 关键帧动画
CSS 过渡
JavaScript vanilla 或一些库
网络动画 API

为 HTML 页面中的 DOM 元素设置动画。

为了帮助您入门，我使用 CSS 关键帧动画创建了一个简单的缩放/缩放效果，但是您可以使用 jQuery、GSAP、Velocity 或其他 JavaScript 库来达到类似的效果。

对于更复杂的动画，我建议使用专门的 JS 库作为 GSAP，如果您需要更简单、吸引眼球的动画，您也可以考虑使用一些预制效果：

animate.css（CSS 关键帧动画）
animatelo.js (Web Animation API) - 声明我创建了这个库:)

这真的取决于你动画的复杂程度和你的技能。

#mario {
  background: url(http://vignette1.wikia.nocookie.net/the-new-super-mario-bros/images/7/7e/200px-Mario_Nintendo.png/revision/latest?cb=20140505185215);
  background-repeat: no-repeat;
  width: 375px;
  height: 375px;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-animation: leaves 5s ease-in-out infinite alternate;
  animation: marioAnim 5s ease-in-out infinite alternate;
}

@-webkit-keyframes marioAnim {
  0% {
    -webkit-transform: scale(1.0);
  }
  100% {
    -webkit-transform: scale(2.0);
  }
}

@keyframes leaves {
  0% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(2.0);
  }
}

&lt;div id="mario"&gt;&lt;/div&gt;

【讨论】：