小编Sid*_*nal的帖子

在JavaScript中触发CSS动画

我不知道如何使用JQuery,所以我需要一个只能使用JavaScript触发动画的方法.当用户滚动页面时,我需要调用/触发CSS Animation.请帮我解决这个问题.

function start() {
  document.getElementById('logo').style.animation = "anim 2s 2s forward";
  document.getElementById('earthlogo').style.animation = "anim2 2s 2s forward";
}
Run Code Online (Sandbox Code Playgroud)

* {
  margin: 0px;
}

#logo {
  position: fixed;
  top: 200px;
  height: 200px;
  width: 1000px;
  left: 5%;
  z-index: 4;
  opacity: 0.8;
}

#earthlogo {
  position: fixed;
  top: 200px;
  height: 120px;
  align-self: center;
  left: 5%;
  margin-left: 870px;
  margin-top: 60px;
  z-index: 4;
  opacity: 0.9;
}

@keyframes anim {
  50% {
    filter: blur(10px);
    transform: rotate(-15deg);
    box-shadow: 0px 0px 10px 3px;
  }
  100% {
    height: 100px; …
Run Code Online (Sandbox Code Playgroud)

html javascript css css-animations

18
推荐指数
6
解决办法
3万
查看次数

标签 统计

css ×1

css-animations ×1

html ×1

javascript ×1